बूटस्ट्रैप 4: दाएं संरेखित

Question

मैं 2 कोल्स के साथ एक पंक्ति बनाने की कोशिश कर रहा हूं। बाईं ओर एक रंग बाईं ओर गठबंधन किया गया है, और दूसरी सामग्री इसके सामग्रियों के साथ सही (पुराने पुल-दाएं) गठबंधन है।

मैं अल्फा -6 में इसके बारे में कैसे जाना है?

मैंने कुछ चीजों की कोशिश की है, लेकिन यह मेरे पास अब तक है। मैं क्या खो रहा हूँ?

<div class="row"> 
    <div class="col">left</div> 
    <div class="col ml-auto">content needs to be right aligned</div> 
</div> 

Answer 1

उपयोग float-right ब्लॉक तत्वों के लिए, या text-right इनलाइन तत्वों के लिए:

<div class="row"> 
    <div class="col">left</div> 
    <div class="col text-right">inline content needs to be right aligned</div> 
</div> 
<div class="row"> 
     <div class="col">left</div> 
     <div class="col"> 
      <div class="float-right">element needs to be right aligned</div> 
     </div> 
</div> 

http://www.codeply.com/go/oPTBdCw1JV

तो float-right काम नहीं कर रहा, याद रखें कि बूटस्ट्रैप 4 अब है फ्लेक्सबॉक्स, और कई तत्व display:flex हैं जो float-right को काम करने से रोक सकते हैं।

कुछ मामलों में, जैसे align-self-end या ml-auto लिए काम उपयोगिता वर्गों सही तत्व है कि बूटस्ट्रैप 4 .row, कार्ड या एनएवी की तरह एक flexbox कंटेनर के अंदर कर रहे हैं संरेखित करें। तत्वों को दाईं ओर धक्का देने के लिए ml-auto (मार्जिन-बाएं: ऑटो) का उपयोग फ्लेक्सबॉक्स तत्व में किया जाता है।

Bootstrap 4 align right examples

Answer 2

प्रलेखन से, आप इसे पसंद करते हैं:

<div class="row"> 
    <div class="col-md-6">left</div> 
    <div class="col-md-push-6">content needs to be right aligned</div> 
</div> 

Docs