col align right

Я пытаюсь создать строку с двумя столбцами. Один столбец слева, его содержимое выровнено влево, а второй столбец со своим контуром выравнивается вправо (старый pull-right).

Как это сделать в альфа-6?

Я пробовал несколько вещей, но это то, что у меня есть до сих пор. Что мне не хватает?

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

Ответы

Ответ 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 не работает, помните, что Bootstrap 4 теперь flexbox, и многие элементы display:flex который может помешать работе float-right.

В некоторых случаях классы утилит, такие как align-self-end или ml-auto выравнивают элементы, находящиеся внутри контейнера flexbox, такие как Bootstrap 4.row, Card или Nav. Ml ml-auto (margin-left: auto) используется в элементе flexbox для перемещения элементов вправо.

Bootstrap 4 выровнять правильные примеры

Ответ 2

Как насчет этого? Bootstrap 4

<div class="row justify-content-end">
    <div class="col-3">
        The content is positioned as if there was
        "col-9" classed div appending this one.
    </div>
</div>

Ответ 3

Из документации вы делаете это так:

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

Документы

Ответ 4

Для Bootstrap 4 я считаю следующее очень удобным, потому что:

  • столбец справа занимает ровно столько места, сколько ему нужно, и потянет вправо
  • в то время как левый столб всегда получает максимальное количество места !.

Таким образом, вам не нужно определять ширину столбца (например, столбец-2,...)

<div class="row">
    <div class="col">Left</div>
    <div class="col-auto">Right</div>
</div>

Идеально подходит для выравнивания слов, значков, кнопок,... вправо.

Пример, чтобы это отзывчиво на небольших устройствах:

<div class="row">
    <div class="col">Left</div>
    <div class="col-12 col-sm-auto">Right (Left on small)</div>
</div>