Αριστερή ευθυγράμμιση και δεξιά ευθυγράμμιση μέσα σε div στο Bootstrap

Ποιοι είναι μερικοί από τους συνήθεις τρόπους για να ευθυγραμμίσετε αριστερά κάποιο κείμενο και δεξιά κάποιο άλλο κείμενο μέσα σε ένα δοχείο div στο bootstrap;

π.χ.

Total cost                   $42

Πάνω από το συνολικό κόστος θα πρέπει να είναι αριστερά στοιχισμένο κείμενο και $42 είναι δεξιά στοιχισμένο κείμενο

Zim
Επεξεργασμένη ερώτηση Κάνε Οκτώβριος 2018 в 2:58
Προγραμματισμός
user-interface twitter-bootstrap bootstrap-4
Κάνε Σεπτέμβριος 2013 в 10:40
19 προβολές
Λύση

2018 Update...

Bootstrap 4.1+

  • Το pull-right είναι τώρα float-right.
  • Το text-right είναι το ίδιο με το 3.x, και λειτουργεί για inline στοιχεία
  • τόσο το float-* όσο και το text-* είναι responsive για διαφορετική στοίχιση σε διαφορετικά πλάτη (π.χ.: float-sm-right)

Τα βοηθήματα flexbox (π.χ.: justify-content-between) μπορούν επίσης να χρησιμοποιηθούν για ευθυγράμμιση:

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

ή, αυτόματες περιθωριοποιήσεις (π.χ.:ml-auto) σε οποιοδήποτε δοχείο flexbox (row,navbar,card,d-flex,κλπ...)

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

Bootstrap 4 Align Demo

Zim
Επεξεργασμένη απάντηση Κάνε Αύγουστος 2018 в 12:03
Σχόλια (2)

Αντί να χρησιμοποιείτε την κλάση pull-right, είναι προτιμότερο να χρησιμοποιείτε την κλάση text-right στη στήλη, επειδή η κλάση pull-right δημιουργεί προβλήματα μερικές φορές κατά την αλλαγή μεγέθους της σελίδας.

Gargaroz
Επεξεργασμένη απάντηση Κάνε Ιούνιος 2015 в 2:44
Σχόλια (0)
 
<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>

Αυτό θα πρέπει να κάνει τη δουλειά εντάξει.

Mosh Feu
Επεξεργασμένη απάντηση Κάνε Μάιος 2016 в 7:32
Σχόλια (0)