बूटस्ट्रैप में div के भीतर लेफ्ट एलाइन और राइट एलाइन

268

कुछ पाठों को संरेखित करने के कुछ सामान्य तरीके हैं और कुछ बूटस्ट्रैप में कुछ अन्य पाठ को संरेखित करना है?

जैसे

Total cost                   $42

कुल लागत से ऊपर संरेखित पाठ छोड़ दिया जाना चाहिए और $ 42 सही संरेखित पाठ है

twitter-bootstrap user-interface bootstrap-4

— user462455
स्रोत

610

2018 अपडेट ...

बूटस्ट्रैप 4.1+

pull-right अब है float-right
text-right 3.x के समान है, और इनलाइन तत्वों के लिए काम करता है
दोनों float-*और text-*कर रहे हैं उत्तरदायी अलग चौड़ाई में अलग संरेखण के लिए (यानी: float-sm-right)

justify-content-betweenसंरेखण के लिए flexbox बर्तन (जैसे:) का भी उपयोग किया जा सकता है:

<div class="d-flex justify-content-between">
      <div>
         left
      </div>
      <div>
         right
      </div>
 </div>

या, ml-autoकिसी भी flexbox कंटेनर (पंक्ति, नावबार, कार्ड, डी-फ्लेक्स, आदि) में ऑटो-मार्जिन (जैसे ) ...

<div class="d-flex">
      <div>
         left
      </div>
      <div class="ml-auto">
         right
      </div>
 </div>

बूटस्ट्रैप 4 संरेखित करें डेमो
बूटस्ट्रैप 4 सही संरेखित उदाहरण (फ्लोट, फ्लेक्सबॉक्स, टेक्स्ट-राइट, आदि) ...

बूटस्ट्रैप ३

pull-rightवर्ग का उपयोग करें ।।

<div class="container">
  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6"><span class="pull-right">$42</span></div>
  </div>
</div>

बूटस्ट्रैप 3 डेमो

आप text-rightवर्ग का उपयोग इस तरह भी कर सकते हैं :

  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
  </div>

बूटस्ट्रैप 3 डेमो 2

— Zim
स्रोत

2

बूटस्ट्रैप 3 के लिए, कॉलम के लिए, text-rightमेरे लिए काम किया।

— फ्लोरिन वोरडोल

60

pull-rightवर्ग का उपयोग करने के बजाय , text-rightकॉलम में कक्षा का उपयोग करना बेहतर है , क्योंकि pull-rightपृष्ठ का आकार बदलते समय कभी-कभी समस्याएं पैदा होती हैं।

— अरुण अग्रवाल
स्रोत

16

~~बूटस्ट्रैप 4 में text-xs-rightकक्षा का उपयोग करने का सही उत्तर है ।~~

यह काम करता है क्योंकि xsबीएस में सबसे छोटे व्यूपोर्ट आकार को दर्शाता है। यदि आप चाहते थे, तो आप केवल तब ही संरेखण लागू कर सकते थे जब व्यूपोर्ट मध्यम या बड़ा हो text-md-right।

नवीनतम अल्फ़ा में, text-xs-rightइसका सरलीकरण किया गया है text-right।

<div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
</div>

— एरिक बर्कुन-ड्रेविनिग
स्रोत

11

बूटस्ट्रैप v4 फ्लेक्सबॉक्स समर्थन का परिचय देता है

<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

Https://v4-alpha.getbootstrap.com/utilities/flexbox/ पर और जानें

— विलियम एंट्रीकेन
स्रोत

6

हम बूटस्ट्रैप 4 फ्लेक्सबॉक्स द्वारा प्राप्त कर सकते हैं:

<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p>$42</p>
</div>

d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%

उदाहरण: JSFiddle

— प्रदीप कुमार
स्रोत

1

<div class="row">
  <div class="col-xs-6 col-sm-4">Total cost</div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">$42</div>
</div>

यह काम ठीक होना चाहिए

— Terrymight
स्रोत