ट्विटर बूटस्ट्रैप फ्लोट डिव राइट

Question

bootstrapएक div को दाईं ओर फ्लोट करने का उचित तरीका क्या है ? मैंने सोचा pull-rightथा कि सिफारिश तरीका था, लेकिन यह काम नहीं कर रहा है।

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .container {
    margin-top: 10px;
}

<div class="container">
    <div class="row-fluid">
        <div class="span6">
            <p>Text left</p>
        </div>
        <div class="span6 pull-right">
            <p>text right</p>
        </div>
    </div>
</div>

Comments

आप टेक्स्ट फ्लोट करना चाहते हैं ?? सीएसएस देखेंtext-align

— रॉन वैन डेर हाइजेन

हालांकि बूटस्ट्रैप में (मानकों) तरीके से बिल्ड नहीं है?

— जस्टिन

stackoverflow.com/questions/12829608/…

— Ron van der Heijden

Answer 1

आपके पास अपनी पंक्ति के भीतर दो स्पैन 6 डिविजन हैं, ताकि पूरे 12 स्पैन ऊपर ले जाएं जो एक पंक्ति से बना है।

दूसरी स्पैन 6 डिव के लिए पुल-राइट जोड़ना इसके लिए कुछ भी करने वाला नहीं है क्योंकि यह पहले से ही दाईं ओर बैठा है।

अगर आप मतलब चाहते हैं कि आप पाठ को दूसरी स्पैन 6 डिव में संरेखित करना चाहते हैं, तो सरल उस डिव में एक नया वर्ग जोड़ें और इसे टेक्स्ट-संरेखित करें: सही मान उदा।

.myclass {
    text-align: right;
}

---

अपडेट करें:

EricFreese ने बताया कि बूटस्ट्रैप (पिछले हफ्ते) के 2.3 रिलीज में उन्होंने टेक्स्ट-एलायंस यूटिलिटी क्लासेस जोड़े हैं जिनका आप उपयोग कर सकते हैं:

• .text-left
• .text-center
• .text-right

http://twitter.github.com/bootstrap/base-css.html#typography

Comments

ऐसा लगता है कि वे में पाठ संरेखित के लिए उपयोगिता वर्गों जोड़ा 2.3 : .text-left, .text-center, और.text-right

— एरिक फ्रीस

@EricFreese - आप सही हैं - उस अपडेट पर ध्यान नहीं दिया गया - मैंने अपना उत्तर अपडेट कर दिया है।

— बिली मूट

यह स्वीकृत उत्तर नहीं होना चाहिए। वहाँ एक बूटस्ट्रैप वर्ग में बनाया गया है जिसे pull-right(@Amit को क्रेडिट) कहा जाता है ; IMO, यह बिल्ट-इन बूटस्ट्रैप क्लास का उपयोग करने के लिए क्लीनर है ... और ओपी ने अपने प्रश्न में पूछा

— कोलोब कैनियन

Answer 2

सही करने के लिए एक div फ्लोट करने के pull-rightलिए सिफारिश तरीका है, मुझे लगता है कि आप सही चीजें कर रहे हैं आपको केवल उपयोग करने की आवश्यकता हो सकती हैtext-align:right;

  <div class="container">
     <div class="row-fluid">
      <div class="span6">
           <p>Text left</p>
      </div>
      <div class="span6 pull-right" style="text-align:right">
           <p>text right</p>
      </div>
  </div>
 </div>      
 </div>

Comments

pull-rightसंस्करण 3.1 के साथ अप्रतिष्ठित रूप से पदावनत किया गया: getbootstrap.com/compenders/#dropdowns-alignment

— ıl

@ ıl। ".. हमने पदच्युत मेनू पर । यह अन्य पुल-राइट usages पर लागू नहीं होता है।

— user2864740 22

Answer 3

बूटस्ट्रैप 3 में एक div के भीतर पाठ संरेखित करने के लिए एक वर्ग है

<div class="text-right">

दाईं ओर पाठ संरेखित करेगा

<div class="pull-right">

केवल पाठ ही नहीं सभी सामग्री को दाईं ओर खींचेगा

Comments

text-right, text-leftऔर text-centerपूरी तरह से काम करता है। और तदनुसार पाठ को कंटेनर के साथ संरेखित करता है।

— अनीश नायर

धन्यवाद @BojanKogoj, वास्तव में पुल-राइट वी ड्रॉपडाउन मेनू के लिए v 3.1 में हटा दिया गया था: getbootstrap.com/compenders/#dropdowns-alignment

— ılǝ

Answer 4

यह एक इनलाइन शैली जोड़ने की आवश्यकता के बिना चाल करता है

<div class="row-fluid">
    <div class="span6">
        <p>text left</p>
    </div>
    <div class="span6">
        <div class="pull-right">
            <p>text right</p>
        </div>
    </div>
</div>

उत्तर <div>"पुल-राइट" वर्ग के साथ एक और घोंसला बनाने में है । दो वर्गों के संयोजन से काम नहीं चलेगा।

Comments

यह सही उत्तर होना चाहिए। बूटस्ट्रैप का मतलब सीधे तौर पर शैलियों से निपटने से बचना है।

— क्रिस्टन वेट

Answer 5

<p class="pull-left">Text left</p>
<p class="text-right">Text right in same line</p>

यह काम मेरे लिए।

संपादित करें: अपने स्निपेट के साथ एक उदाहरण:

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.css');
 .container {
    margin-top: 10px;
}

<div class="container">
    <div class="row-fluid">
        <div class="span6 pull-left">
            <p>Text left</p>
        </div>
        <div class="span6 text-right">
            <p>text right</p>
        </div>
    </div>
</div>

Answer 6

आप क्लास के नाम को टेक्स्ट-सेंटर, लेफ्ट या राइट की तरह असाइन कर सकते हैं। इन वर्ग नाम के अनुसार पाठ संरेखित होगा। आपको अलग से अतिरिक्त वर्ग नाम बनाने की आवश्यकता नहीं है। ये कक्षाएं बूटस्ट्रैप 3 और बूटस्ट्रैप 4 में निर्मित हैं।

बूटस्ट्रैप ३

v3 पाठ संरेखण डॉक्स

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

बूटस्ट्रैप ४

v4 पाठ संरेखण डॉक्स

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>