Ποιοι είναι μερικοί από τους συνήθεις τρόπους για να ευθυγραμμίσετε αριστερά κάποιο κείμενο και δεξιά κάποιο άλλο κείμενο μέσα σε ένα δοχείο div στο bootstrap;
π.χ.
Total cost $42
Πάνω από το συνολικό κόστος θα πρέπει να είναι αριστερά στοιχισμένο κείμενο και $42 είναι δεξιά στοιχισμένο κείμενο
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<br>, Bootstrap 4 Right Align Examples(float, flexbox, text-right, κλπ...)
<hr>,
Bootstrap 3
Χρησιμοποιήστε την κλάση 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>
Μπορείτε επίσης να χρησιμοποιήσετε την κλάση text-right
όπως αυτή:
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
Αντί να χρησιμοποιείτε την κλάση pull-right
, είναι προτιμότερο να χρησιμοποιείτε την κλάση text-right
στη στήλη, επειδή η κλάση pull-right
δημιουργεί προβλήματα μερικές φορές κατά την αλλαγή μεγέθους της σελίδας.
<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>
Αυτό θα πρέπει να κάνει τη δουλειά εντάξει.