0

Есть проект на Bootstrap 3. В нем есть глобальный блок .container, внутри этого контейнера нужно разместить 3 div по ширине так, чтобы слева у первого блока и справа у третьего не было отступов от края .container и между блоками была равномерная дистанция. Я пробовал поместить .container-fluid внутрь .container, но слева и справа все равно есть отступы и избавиться от них никак не могу:

<div class="container">
 <div class="container-fluid">
  <div class="row">
   <div class="col-xs-4">Block 1</div>
   <div class="col-xs-4">Block 2</div>
   <div class="col-xs-4">Block 3</div>
  </div>
 </div>
</div>
2
  • Добавьте к контейнеру кастомный класс с padding-left и right 0
    – Nilsan
    3 сен 2018 в 10:48
  • @Nilsan Пробовал, тогда 3 блока выравниваются по левому краю, а мне надо по-ширине. 3 сен 2018 в 10:49

2 ответа 2

2

UPD. Чтобы распределить содержимое колонок по ширине, попробуйте выравнивание внутри колонок и/или просветы между колонками.

А чтобы избавиться от отступов по бокам, достаточно убрать блок с container-fluid. Правильная структура в Бутстрапе:

  • контейнер (container или container-fluid)
  • внутри контейнера ряды (row)
  • внутри рядов колонки (col-...)

Бутстрап задаёт колонкам паддинг 15px, а рядам - отрицательный маржин -15px, и они компенсируют друг друга как раз для крайних колонок.

.col-xs-4:nth-child(3n+1) { background-color: #cff; }
.col-xs-4:nth-child(3n+2) { background-color: #fcf; }
.col-xs-4:nth-child(3n+3) { background-color: #ffc; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <p class="text">Text</p>
  <div class="row">
    <div class="col-xs-4">Block 1</div>
    <div class="col-xs-4">Block 2</div>
    <div class="col-xs-4">Block 3</div>
  </div>
</div>

1

Как вариант

.mywrap{
  background-color: red;
}

.col-xs-4{
  background-color: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mywrap">
  <div class="row">
   <div class="col-xs-4">Block 1</div>
   <div class="col-xs-4">Block 2</div>
   <div class="col-xs-4">Block 3</div>
  </div>
</div>

Если нужно убрать отступы и у самих колонок то можно добавить еще так

.col-xs-4:first-of-type{
  padding-left: 0;
}

.col-xs-4:last-of-type{
  padding-right: 0;
}

2
  • 1
    это не корректная разметка, т.к class col- должен быть помещен в контейнер с классом .row
    – soledar10
    3 сен 2018 в 11:32
  • согласен, поправил 3 сен 2018 в 11:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.