Вирівнювання ліворуч і праворуч вирівнювання в div в Bootstrap


268

Назвіть декілька поширених способів вирівнювання тексту зліва та правого вирівнювання іншого тексту в контейнері div у завантажувальному?

напр

Total cost                   $42

Більше загальної вартості має бути вирівняний текст зліва, а 42 долари - текст, вирівняний праворуч

Відповіді:


610

Оновлення 2018 року ...

Завантажувальний пристрій 4.1+

  • pull-right зараз float-right
  • text-right те саме, що і 3.x, і працює для вбудованих елементів
  • як float-*і text-*в чуйні для різного вирівнювання при різній ширині (тобто float-sm-right)

Утиліти flexbox (наприклад:) justify-content-betweenтакож можна використовувати для вирівнювання:

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

або, автоматичні поля (наприклад ml-auto:) у будь-якому контейнері flexbox (рядок, навібар, картка, d-flex тощо)

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


Приклади завантаження 4 Вирівнювання демонстраційного завантажувального приклада 4 Приклади вирівнювання праворуч (флоат, флексбокс, текст праворуч тощо)


Завантаження 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>

Демонстрація завантаження 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
Для Bootstrap 3, для стовпця, text-rightпрацював для мене.
Флорін Вордол

60

Замість використання pull-rightкласу краще використовувати text-rightклас у стовпці, тому що pull-rightіноді створюються проблеми під час зміни розміру сторінки.


16

У Bootstrap 4 правильною відповіддю є використання text-xs-rightкласу.

Це працює, тому що xsпозначає найменший розмір вікна перегляду в BS. Якщо ви цього хочете, ви можете застосувати вирівнювання лише тоді, коли вікно перегляду буде середнім або більшим, використовуючи 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>


6

Ми можемо досягти Bootstrap 4 Flexbox:

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

Це повинно робити роботу просто гаразд

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.