Bootstrap 4 выравнивает элементы прямо внутри col div

Мой вопрос довольно прост, но я не нахожу правильного способа (я имею в виду не использовать абсолютное позиционирование подэлементов внутри контейнера относительного положения) для достижения этого в Bootstrap 4.

У меня есть ряд с столбцом-8 и столбцом-4. Мой контент в столбце 4 должен быть выровнен по правому краю, чтобы его содержимое находилось на правой границе.

<h1 class="col-md-8">Applications portfolio</h1>

  <div class="btn-group col-md-4" role="group">
    <p class="float-right">
      <a class="btn btn-secondary btn-md" href="#">
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
      <a class="btn btn-md btn-secondary" href="#">
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
    </p>
  </div>

Вот кодеп:

https://codepen.io/anon/pen/QpzVgJ

Я хочу, чтобы мои две кнопки были выровнены по правому краю в col-4.

Как в Bootstrap 4 правильно выровнять элементы внутри столбца?


css flexbox twitter-bootstrap bootstrap-4 twitter-bootstrap-4
person BlackHoleGalaxy    schedule 31.03.2017    source источник

Ответы (3)


arrow_upward
18
arrow_downward

Используйте ml-auto, чтобы сдвинуть кнопки вправо...

https://codepen.io/anon/pen/evbLQN

<div class="btn-group col-md-4" role="group">
    <p class="ml-auto">
      <a class="btn btn-secondary btn-md" href="#">
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
      <a class="btn btn-md btn-secondary" href="#">
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
    </p>
</div>

Другой вариант — удалить btn-group из col-md-4, и тогда float-right будет работать как положено. Класс pull-right был заменен на float-right в Bootstrap 4.

<section class="row">
  <h1 class="col-md-8">Applications portfolio</h1>

  <div class="col-md-4" role="group">
    <p class="float-right">
      <a class="btn btn-secondary btn-md" href="#">
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
      <a class="btn btn-md btn-secondary" href="#">
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
    </p>
  </div>
</section>

PS — Чтобы горизонтальная полоса прокрутки не была видна в вашем Codepen, убедитесь, что .row находится внутри container-fluid. Кроме того, обычно col-* используются для содержания содержимого и не должны применяться к другим компонентам/элементам. Так, например, если вы хотите использовать btn-group..

<div class="container-fluid">
    <section class="row">
        <div class="col-md-8">
            <h1>Applications portfolio</h1>
        </div>
        <div class="col-md-4">
            <div class="btn-group float-right mt-2" role="group">
                <a class="btn btn-secondary btn-md" href="#">
                    <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
                <a class="btn btn-md btn-secondary" href="#">
                    <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
            </div>
        </div>
    </section>
</div>

http://www.codeply.com/go/8OYDK5D8Db

Связанный: Элемент выравнивания по правому краю в классе div с начальной загрузкой 4 < /а>

person Zim    schedule 31.03.2017

arrow_upward
7
arrow_downward

Класс btn-group в этом md-4 делает этот DIV гибким контейнером, поэтому обычный класс text-right для выравнивания не будет работать. Вместо этого добавьте к нему justify-content: flex-end; в атрибуте стиля:

<div class="btn-group col-md-4 text-right" role="group" style="justify-content: flex-end;">

https://codepen.io/anon/pen/RpEYEM

(примечание: я стер тег p внутри этого DIV)

person Johannes    schedule 31.03.2017

arrow_upward
3
arrow_downward

Есть несколько проблем с предоставленной разметкой, из-за которых макет выглядит странно. @ZimSystem упомянул .container-fluid, но также и то, что вы всегда должны иметь div.col внутри .row, чтобы вы получали одинаковые отступы по краям.

Вам не нужны <p> вокруг кнопок. Чтобы получить выравнивание, просто добавьте .ml-auto к первой кнопке следующим образом:

<div class="container-fluid">
<section class="row mb-2 mt-2">
  <h1 class="col-md-8">Applications portfolio</h1>

  <div class="btn-group col-md-4" role="group">
      <a class="btn btn-secondary btn-md ml-auto" href="#">
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
      <a class="btn btn-md btn-secondary" href="#">
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
  </div>
</section>

<section class="row" style="background-color: grey; height: 50px; overflow:hidden;">
  <div class="col">
    <p>Just a simple reference block to see the 100% width</p>
  </div>
</section>
</div>
person Killerpixler    schedule 31.03.2017