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

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

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

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

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

Вы можете достичь расстояния между столбцами, используя 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

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

<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 делениями.

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

<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;
}

Попробуй это

Вы можете использовать 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>

У меня были похожие проблемы с пространством между столбцами. Основная проблема заключается в том, что в столбцах начальной загрузки 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, который мы назвали «поднятым блоком», должен быть прямым братом столбца

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

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

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

<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>

Вы можете достичь расстояния между столбцами, используя классы 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>

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

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

Согласно документации 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>

Внутри 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>

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;

Я должен был выяснить, как это сделать для 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)

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

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

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

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

все просто .. нужно добавить сплошную рамку справа, слева в 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;
}

Я знаю, что этот пост немного устарел, но я столкнулся с этой же проблемой. Пример моего 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;
}

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

Мне нужен был один столбец на мобильном телефоне и два столбца от портрета планшета вверх, с равным интервалом между ними в середине (также без добавления сетки добавляемой внутри столбцов). Может быть достигнуто с помощью утилиты разнесения и пропуская число в 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>

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

Чтобы получить определенную ширину промежутка между столбцами, мы должны установить 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>

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

.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.

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

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

.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>

    <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;
}

<div class="col-md-6">
    <div class="inner">
        <!-- Put the col-6 elements in the inner div -->
    </div>
</div>

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

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

.row div{
  padding-left: 8px;
  padding-right: 8px;
}

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

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>

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

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

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

Это также один из способов сделать это и его работы. Пожалуйста, проверьте следующий 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>

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

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

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

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