Выравнивание по левому краю и выравнивание по правому краю в div в Bootstrap

Question

Выравнивание по левому краю и выравнивание по правому краю в div в Bootstrap

Каковы некоторые из распространенных способов выравнивания левого текста и правого выравнивания другого текста в контейнере div в bootstrap?

например

Total cost

выше общей стоимости должен быть выровнен по левому краю текст и $42 выровнен по правому краю текст

1751 6

twitter-bootstrap bootstrap-4

6 ответов:

Comments

Ничего не найдено.

Zim · Accepted Answer · 2018-08-17 15:03:16

обновление 2018 года...

Bootstrap 4.1+

pull-right теперь float-right

text-right это то же самое, что и 3.x, и работает для встроенных элементов

и float-* и text-* are отзывчивый для различного выравнивания на различных ширинах (ie:float-sm-right)

Flexbox utils (например:justify-content-between) можно также использовать для выравнивание:
<div class="d-flex justify-content-between">
      <div>
         left
      </div>
      <div>
         right
      </div>
 </div>
или, авто-отступы (например:ml-auto) в любую емкость элемента (строки,навигации,карты,г-гибкий и т. д...)
<div class="d-flex">
      <div>
         left
      </div>
      <div class="ml-auto">
         right
      </div>
 </div>
Bootstrap 4 Align Demo
Bootstrap 4 Right Align Examples(float, flexbox, text-right и т. д...)

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"></span></div>
  </div>
</div>
Bootstrap 3 Demo

вы также можете использовать элемент text-right класс такой:
  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right"></div>
  </div>
Bootstrap 3 Demo 2

Arun Agarwal · Accepted Answer · 2015-06-22 17:44:00

вместо pull-right класс, лучше использовать text-right класса в столбце, потому что pull-right иногда создает проблемы при изменении размера страницы.

Erik Berkun-Drevnig · Accepted Answer · 2017-01-08 22:58:37

~~в 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"></div>
</div>

William Entriken · Accepted Answer · 2017-03-23 15:38:36

Bootstrap v4 представляет поддержку flexbox
<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/

pradeep kumar · Accepted Answer · 2017-12-27 14:31:08

мы можем достичь с помощью Bootstrap 4 Flexbox:
<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p></p>
</div>

d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%
пример: JSFiddle

Terrymight · Accepted Answer · 2016-05-03 10:32:31

<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"></div>
</div>

Это должно сделать работу просто ОК