Как добавить интервал между столбцами в Bootstrap?

202

Я уверен, что есть простое решение этой проблемы. В принципе, если у меня есть два столбца, как я могу добавить пробел между ними?

например, если HTML это:

<div class="col-md-6"></div>
<div class="col-md-6"></div>

Выводом будет просто два столбца рядом друг с другом, занимающие всю ширину страницы. Скажем, ширина была установлена, чтобы 1000pxкаждый div был 500pxшироким.

Если бы я хотел 100pxпромежуток между двумя, как я мог достичь этого? Очевидно, что автоматически с помощью начальной загрузки размеры div станут 450pxтакими, чтобы компенсировать пространство

Мухаммед Бхиха
источник

Ответы:

149

Вы можете достичь расстояния между столбцами, используя col-md-offset-*классы, описанные здесь . Интервал одинаков, поэтому все ваши столбцы выстроены правильно. Чтобы получить равномерный интервал и размер столбца, я бы сделал следующее:

<div class="row">
  <div class="col-md-5"></div>
  <div class="col-md-5 col-md-offset-2"></div>
</div>

В Bootstrap 4 используйте: offset-2илиoffset-md-2

Бен
источник
30
это будет работать, когда я хочу придерживаться размеров столбцов по умолчанию, что, если я хочу определенный размер интервала, а не смещение столбцов?
Мухаммед Бхиха
3
В этом случае я бы порекомендовал использовать предоставленные миксины для настройки желобов столбцов: getbootstrap.com/css/#grid-less - Bootstrap не выполняет то, что вы задаете в вопросе, он не может «регулировать» ширину сетки для учета дополнительный интервал между ними, потому что он основан на пиксельной сетке.
Бен
2
Джордж - у тебя есть классы смещения для этого. Но если вы обнаружите, что встроенных желобов недостаточно, то вы можете попробовать скомпилировать свою собственную версию начальной загрузки, либо из меньшего, либо из sass, в зависимости от ваших предпочтений. Затем вы можете изменить ширину столбцов и желобов в соответствии с вашим сайтом. Добавление пустых div'ов не так уж и плохо, важно то, чтобы придумать что-то, что вы (и / или ваша команда) можете использовать последовательно; если пустые div - это способ, которым вы достигаете этого, тогда это нормально; помните, что ваша разметка предназначена для чтения вашими разработчиками, а не конечными пользователями.
Бен
24
Этот пост не является ответом вообще, он создает разрыв намного больше, чем просили.
Себастьян
2
В Bootstrap 4 это смещение-md-2 или смещение-2
Махеш
318

Я столкнулся с той же проблемой; и следующее работало хорошо для меня. Надеюсь, это поможет кому-то приземлиться здесь:

<div class="row">
  <div class="col-md-6">
     <div class="col-md-12">
        Some Content.. 
     </div>
  </div>
  <div class="col-md-6">
     <div class="col-md-12">
        Some Second Content.. 
     </div>
  </div>
</div>

Это автоматически отрендерит некоторое пространство между 2 делениями.

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

Утпал - Ур Бест Пал
источник
в основном из-за ширины желоба.
Утпал - Ур Бест Пал
15
«Ширина водосточного желоба» относится к расстоянию между отступами и полями, определенным в ядре системы сетки начальной загрузки. Короче говоря, добавление второго div с col-xs-12аналогично добавлению div сwidth:100%; padding:0px 15x;
mix3d
@ sixty4bit не могли бы вы поделиться своим кодом; возможно, я могу помочь тебе.
Утпал - Ур Бест Пал
это было бы здорово @ Utpal-UrBestPal, спасибо! вот суть: gist.github.com/davidcpell/8d344ff18d5d188115c0ff9ba6ef7d14
шестьдесят
2
Если вы используете это исправление, и оно не работает, прочитайте, почему оно работает, в объяснении @ mix3d, и вы поймете, что делаете неправильно.
MauF
73

Я знаю, что опаздываю на вечеринку, но вы можете попробовать расставить ящики с прокладками.

<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>

CSS:

.box {
    padding: 0 5px 0 5px;
}
.box .inner {
    background-color: #fff;
}

Попробуй это

Робин Йонссон
источник
Не совсем, потому что вы не можете использовать row-eq-heightего
Грег Воз
13

Вы можете использовать background-clip и box-model с пропретой границей

.box{
  box-model: border-box;
  border: 3px solid transparent;
  background-clip:padding-box;
}
<div class="row">
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
</div>
Али Эль Хабчи
источник
13

У меня были похожие проблемы с пространством между столбцами. Основная проблема заключается в том, что в столбцах начальной загрузки 3 и 4 вместо отступа используется заполнение. Таким образом, цвета фона для двух соседних столбцов соприкасаются друг с другом.

Я нашел решение, которое соответствует нашей проблеме и, скорее всего, будет работать для большинства людей, пытающихся разместить столбцы и поддерживать ту же ширину желоба, что и остальная часть сетки.

Это был конечный результат, к которому мы стремились

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

Наличие разрыва с тенью от столбцов было проблематично. Мы не хотели дополнительного пространства между столбцами. Мы просто хотели, чтобы желоба были «прозрачными», чтобы цвет фона сайта отображался между двумя белыми столбцами.

это разметка для двух столбцов

<div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>

CSS

.raised-block {
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; // for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
    .raised-block {
        margin-left: -0.625rem;
    }
}
.row [class^="col-"]:first-child>.raised-block {
    // this is so the first column has no margin so it will not be "indented"
    margin-left: -0.625rem;
}

Этот подход требует внутреннего div с отрицательными полями, как это использует класс начальной загрузки класса "row". И этот div, который мы назвали «поднятым блоком», должен быть прямым братом столбца

Таким образом, вы все равно получите правильное заполнение внутри ваших столбцов. Я видел решения, которые, кажется, работают, создавая пространство, но, к сожалению, создаваемые ими столбцы имеют дополнительные отступы по обеим сторонам строки, так что в итоге получается более тонкий ряд, для которого был разработан макет сетки. Если вы посмотрите на изображение для желаемого взгляда, это будет означать, что два столбца вместе будут меньше, чем один большой сверху, который нарушает естественную структуру сетки.

Основным недостатком этого подхода является то, что он требует дополнительной разметки, заключающей в себе содержимое каждого столбца. Для нас это работает, потому что только определенные столбцы нуждаются в промежутке между ними для достижения желаемого вида.

Джо Фитцгиббонс
источник
11

Это позволит пространство между двумя столбцами и, очевидно, если вы хотите изменить ширину по умолчанию, вы можете использовать миксины для изменения ширины начальной загрузки по умолчанию. Или вы можете указать ширину, используя встроенный стиль CSS.

<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>
Amit
источник
4
Семантика этого не совсем то, что просит @Muhammed. Вы добавляете изменение в порядке столбцов с нажатой левой кнопкой, правой рукой.
Luchux
9

Вы можете достичь расстояния между столбцами, используя классы col-xs- *, внутри div-столбца col-xs- *, закодированного ниже. Интервал одинаков, поэтому все ваши столбцы выстроены правильно. Чтобы получить равномерный интервал и размер столбца, я бы сделал следующее:

<div class="container">
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
</div>
User_3535
источник
6

Используйте .form-groupкласс начальной загрузки . Вот так в вашем случае:

<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>
S ..
источник
1
Чем может быть полезен нижний край?
Элизабет
13
Я специально вошел в систему, чтобы не любить этот хак.
Сздрня
14
Я специально вошел в систему только для того, чтобы проголосовать за ваш комментарий о намеренном входе, чтобы просто не любить этот хак.
Адам
Я специально вошел в систему, чтобы проголосовать за ваш комментарий о намеренном входе, чтобы просто проголосовать за комментарий о намеренном входе, чтобы не понравиться этот хак.
Черный
5

Согласно документации Bootstrap 4, вы должны дать родителю отрицательное поле mx-n*, а потомкам положительное заполнение.px-*

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row mx-n5">
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
</div>

estani
источник
То, что работало лучше всего для меня (вертикальное расстояние между рядами), было <div class="row mt-n4">и <div class="col-3 pt-4">.
Гэвин
4

Внутри col-md- ?, создайте еще один div и поместите в него картинку, чем вы можете легко добавить заполнение следующим образом.

<div class="row">
  <div class="col-md-8">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>
  <div class="col-md-4">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>   
</div>

<style>
  thumbnail{
     padding:4px;
           }
</style>
Farac
источник
4

Bootstrap 4 , файл custom.scss вы можете добавить следующий код:

$grid-gutter-width-base: 20px;

$grid-gutter-widths: ( xs: $grid-gutter-width-base, 
sm: $grid-gutter-width-base, 
md: $grid-gutter-width-base, 
lg: $grid-gutter-width-base, 
xl: $grid-gutter-width-base
);

по умолчанию $ grid-gutter-width-base: 30px;

Иван Джордевич
источник
1
не могли бы вы уточнить это? это не работает для меня
Сельва Ганапати
2
@SelvaGanapathi вы должны перекомпилировать после изменения этих переменных: getbootstrap.com/docs/4.0/layout/grid/#customizing-the-grid
gbjbaanb
В Bootstrap 4 это смещение-md-2 или смещение-2
Махеш
2

Я должен был выяснить, как это сделать для 3 столбцов. Я хотел закруглить углы делений и не мог заставить интервал работать. Я использовал поля. В моем случае я рассчитывал на 90% экрана, который должен быть заполнен, и 10% на полях:

HTML:

<div class="row">
  <div id="orange" class="col-md-4">
    <h1>Orange Div</h1>
  </div>
  <div id="green" class="col-md-4">
    <h1>Green Div</h1>
  </div>
  <div id="aqua" class="col-md-4">
    <h1>Aqua Div</h1>
  </div>
</div>

и CSS:

#orange {
    background-color:orange;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width:30%;
}
#green {
    background-color:green;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 0 0 0;
    width:30%;
}
#aqua {
    background-color:#39F;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width: 30%;
}

Для того, чтобы сделать его размер правильно для мобильных устройств, я имел CSS изменить ширину от 30% до width:92.5%;Under@media (max-width:1023px)

Лазер Один Джим
источник
2

Так как вы используете загрузчик , я думаю, вы хотите, чтобы все было адаптивно . В этом случае вы не должны использовать фиксированные размеры, например, в «px».

В качестве обходного пути к другим решениям я предлагаю сделать оба столбца «col-md-5» вместо «col-md-6», а затем в родительском элементе «row», содержащем столбцы, добавить класс «justify-content». -between ", который помещает свободное место посередине, как вы можете проверить в документации по начальной загрузке здесь

Это решение также действительно для более чем двух столбцов, корректирующих «col-md-x», конечно

Надеюсь, поможет ;)

Хьюго
источник
1

все просто .. нужно добавить сплошную рамку справа, слева в col- * и это должно работать .. :)

это выглядит так: http://i.stack.imgur.com/CF5ZV.png

HTML:

<div class="row">
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
</div>

CSS:

div#services_block {
   height: 355px;
   background-color: #33363a;
   border-left:3px solid white;
   border-right:3px solid white;
}
Мохамед Ахмед
источник
8
Вы не используете несколько идентификаторов на одной странице, это совершенно не знает, как использовать CSS. Используйте классы вместо.
LowFieldTheory
1

Я знаю, что этот пост немного устарел, но я столкнулся с этой же проблемой. Пример моего HTML.

<div class="row">
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="FirstName" class="control-label"></label>
            <input asp-for="FirstName" class="form-control" />
            <span asp-validation-for="FirstName" class="text-danger"></span>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="LastName" class="control-label"></label>
            <input asp-for="LastName" class="form-control" />
            <span asp-validation-for="LastName" class="text-danger"></span>
        </div>
    </div>            
</div>

Чтобы создать пространство между группами, я переопределил поле начальной загрузки -15px в своем файле site.css, уменьшив отрицательное поле на 5.

Вот что я сделал ...

.form-group {
    margin-right: -10px;
}

Я надеюсь, что это помогает кому-то еще.

Марк Либнер
источник
1

Мне нужен был один столбец на мобильном телефоне и два столбца от портрета планшета вверх, с равным интервалом между ними в середине (также без добавления сетки добавляемой внутри столбцов). Может быть достигнуто с помощью утилиты разнесения и пропуская число в col-md:

    <div class="container-fluid px-0">
        <div class="row no-gutters">
            <div class="col-sm-12 col-md mr-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
            <div class="col-sm-12 col-md ml-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
        </div>
    </div>
drvictor666
источник
0

Как насчет простого добавления рамки того же цвета, что и фон, с помощью CSS? Я новичок в этом, так что, возможно, есть веская причина не делать этого, но это выглядело хорошо, когда я попробовал.

Брайан
источник
5
Добро пожаловать в переполнение стека. Если вам нужна дополнительная информация или разъяснения по вопросу, используйте комментарии вместо ответов.
β.εηοιτ.βε
Если бы фон использовал изображение / текстуру вместо сплошного цвета, это было бы очевидно.
Чарльз Уотсон
0

Чтобы получить определенную ширину промежутка между столбцами, мы должны установить paddingстандартную схему Bootstrap.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

/* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */
@media (min-width: 992px) { 
  .space-100-px > .row > .col-md-6:first-child {
    padding: 0 50px 0 0; /* The first half of 100px */
  }
  .space-100-px > .row > .col-md-6:last-child {
    padding: 0 0 0 50px; /* The second half of 100px */
  }
}

/* The result will be easier to see. */ 
.space-100-px img {
  width: 100%;
  height: auto;
}
<div class="container-fluid space-100-px">
  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Left" alt="Left">
    </div>
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Right" alt="Right">
    </div>
  </div>
</div>

Глеб Кемарский
источник
0

Это будет полезно ..

.list-item{
  margin-right:-10px;
   margin-top:10px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    padding: 0px;
  }
<div class="col-md-4">
  <div class="list-item">
      <h2>Your name</h2> 
  </div>
</div>
<div class="col-md-4">
   <div class="list-item"></div>
</div>

Если вы хотите увеличить или уменьшить маржу в правой части поля, просто отредактируйте свойство margin-right элемента list.

образец вывода

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

arulraj
источник
0

Просто белая рамка вокруг элемента обтекания

.padding-pls{
  border-left: 13px solid white;
  border-right: 13px solid white;
}
.row .col-md-6:first-child>.padding-pls {
  border-left: 0px solid white;
}
.row .col-md-6:last-child>.padding-pls {
  border-right: 0px solid white;
}

и первый + последний ребенок без границ

    <div class="row">
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
  </div>
Якуб Стейскал
источник
0
    <div class="col-md-12 no_padding header_row"></div>



    <div class="second_row">
        <div class="col-md-4 box_shadow"></div>
        <div class="col-md-8 no_padding_right">
            <div class="col-md-12 box_shadow"></div>
        </div>
    </div>


    body{
    background:#F0F0F0;
}

.main_holder{
    min-height: 600px;
    margin-top: 40px;
    height: 600px;
}
.box_shadow{
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    background: white;
    height: auto;
    min-height: 500px;
}

.no_padding{
    padding: 0px !important;
}

.no_padding_right{
    padding-right: 0px !important;
}

.header_row{
    height: 60px;
    background: #00796B;
    -webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    -moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    box-shadow: 0px 0px 9px 1px rgba(143,140,143,1); 
}

.second_row{
    position: relative;
    width: 100% !important;
    top: 20px;
}
РИТИН К
источник
2
Немного прозы о том, что и почему может быть полезным.
Уве Алнер
0
<div class="col-md-6">
    <div class="inner">
        <!-- Put the col-6 elements in the inner div -->
    </div>
</div>

По умолчанию это обеспечивает некоторый отступ во внешнем div так, как вам нужно. Кроме того, вы также можете изменить отступы, используя собственный CSS.

Акшай Р
источник
0

Простой способ

.row div{
  padding-left: 8px;
  padding-right: 8px;
}
Владислав Кошеневский
источник
0

Bootstrap 4

Документация говорит ( здесь ):

Ряды являются обертками для колонн. Каждый столбец имеет горизонтальное заполнение (называемое желобом) для управления пространством между ними. Этому отступу затем противодействуют строки с отрицательными полями. Таким образом, весь контент в ваших столбцах визуально выравнивается по левой стороне.

Итак, правильный ответ: установите cols 'padding-left / right равным минусу вашего rowполя left / right. Так просто.

#my-row {
  margin-left: -80px;
  margin-right: -80px;
}

#my-col {
  padding-left: 80px;
  padding-right: 80px;
}

Демо: https://codepen.io/frouo/pen/OqGaWN

col с пользовательским интервалом

frouo
источник
0

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

Bootstrap 4 - Разделите столбцы, используя вложенные строки.

<div class="container">
    <div class="row bg-info p-3">

        <!-- left column -->
        <div class="col-8 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>

        <!-- right column -->
        <div class="col-4 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>
    </div>
</div>

источник
Может быть, использование ответа @estani является более «классическим» способом сделать это с bootstrap4?
Содимел
0

Создайте класс и используйте:

поле: 1,5 евро. 5 евро; max-width: calc (50% - 1em)! важный;

Где 1em на максимальной ширине равно левому / правому полю, сложенному вместе.

WebDude0482
источник
-1

Это также один из способов сделать это и его работы. Пожалуйста, проверьте следующий URL https://jsfiddle.net/sarfarazk/ofgqm0sh/

<div class="container">
 <div class="row">
  <div class="col-md-6">
    <div class="bg-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="col-md-6">
    <div class="bg-warning">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    </div>
  </div>
</div>
</div>
Сарфараз Касмани
источник
-2

Использование margin-left - это путь:

<div style="margin-left:-2px" class="col-md-6"></div>
<div style="margin-left:2px" class="col-md-6"></div>

работает отлично

alanh
источник
Нет, это не нарушает отзывчивость.
Crasher
-2

В последней версии начальной загрузки вы можете использовать «карты»

дружинник
источник
Ваш ответ требует дальнейшего объяснения. Пожалуйста, смотрите stackoverflow.com/help/how-to-answer
Simon.SA