Bootstrap при задании отступа последний блок переходит на другую строку

Рейтинг: 0Ответов: 1Опубликовано: 17.05.2023

Проект написан на Angular, но стилей ни каких больше не подключено.

Использую Boonstrap 4.5

Добавлен link

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

В контейнере расположено 3 кнопки и все они расположены в одной строке, вот код:

<div class="container-fluid">     
  <div class="jumbotron col-sm-8 p-2 m-0 bg-inverse">
    <div class="col-sm-12 p-1 m-0">
      <button class="btn btn-info col-sm-6" type="button" (click)="allClear()">allClear</button>
      <button class="btn btn-warning col-sm-3" type="button" (click)="clear()">clear</button>
      <button class="btn btn-secondary col-sm-3" type="button" (click)="add()">add</button>
    </div>      
  </div>    
</div>

Но как только в одной из кнопок добавляю свойство margin (m-1), отступ появляется, но при этом последняя кнопка переходит на новую строку (см. рис ниже)

<div class="container-fluid">
  <div class="jumbotron col-sm-8 p-2 m-0 bg-inverse">
    <div class="col-sm-12 p-1 m-0">
      <button class="btn btn-info col-sm-6 m-1" type="button" (click)="allClear()">allClear</button>
      <button class="btn btn-warning col-sm-3" type="button" (click)="clear()">clear</button>
      <button class="btn btn-secondary col-sm-3" type="button" (click)="add()">add</button>
    </div>  
  </div>    
</div>

Как мне задать внешние отступы у кнопок, но чтобы они все оставались на одной строке?

Вот что получилось

bootstrap4
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Во-первых, у Вас ошибка в разметке: обёрткой для группы колонок должен быть див с классом row, а не col-sm-12. Во-вторых, для предотвращения переноса колонок можно, конечно, задать блоку-обёртке класс flex-nowrap. Но тогда, при внешних отступах у кнопок, крайняя начнёт вылезать справа за пределы джумботрона:

введите сюда описание изображения

Оптимальным решением в Вашем случае будет убрать классы col-sm-* у кнопок, добавить им класс w-100 (ширина 100%) и обернуть каждую в div с классом col-sm-* - тогда кнопки спокойно уместятся в один ряд, будут нужной ширины, и между ними появятся необходимые отступы:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container-fluid">     
  <div class="jumbotron col-sm-8 p-2 m-0 bg-inverse">
    <div class="row p-1 m-0">
      <div class="col-sm-6">
        <button class="btn btn-info w-100" type="button" (click)="allClear()">allClear</button>
      </div>
      <div class="col-sm-3">
        <button class="btn btn-warning w-100" type="button" (click)="clear()">clear</button>
      </div>
      <div class="col-sm-3">
        <button class="btn btn-secondary w-100" type="button" (click)="add()">add</button>
      </div>
    </div>      
  </div>    
</div>

Отступы, кстати, при желании можно уменьшить - достаточно задать колонкам класс p-1, например.