ट्विटर बूटस्ट्रैप फ्लोट div दाएं

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>

Answer 1

आप इतना है कि ऊपर ले जाएगा पूरे 12 तक फैला है कि एक पंक्ति से बना है अपने पंक्ति के भीतर दो span6 divs है।

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

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

.myclass { 
    text-align: right; 
} 

---

अद्यतन:

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

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

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

Answer 2

सही pull-right को एक div फ्लोट करने के लिए, मुझे लगता है कि आप चीजों को कर रहे हैं सही हो सकता है आप केवल 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> 

Answer 3

उपयोग करने के लिए यह करता है की जरूरत है जिस तरह की सलाह देते है एक इनलाइन शैली

<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> घोंसला। दो वर्गों का संयोजन काम नहीं करेगा।

Answer 4

बूटस्ट्रैप 3 एक div

<div class="text-right"> 

भीतर पाठ संरेखित करने के लिए सही

<div class="pull-right"> 

सही करने के लिए सभी सामग्री को न केवल पाठ

खींच लेंगे पर पाठ संरेखित होगा एक वर्ग है

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 में बनाया गया और bootstrap 4.

बूटस्ट्रैप 3

v3 Text Alignment Docs

<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> 

बूटस्ट्रैप 4

v4 Text Alignment Docs

<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>