Ответ 1

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

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

Ответ 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>

Это автоматически отобразит пробел между двумя div.

Ответ 3

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

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

Идите по нему

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

вы можете использовать background-clip и box-model с border proprety

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

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;

Ответ 10

Внутри col-md-?, создайте еще один div и поместите изображение в этот 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>

Ответ 11

Мне нужно было выяснить, как это сделать для 3 столбцов. Я хотел обогнуть углы дивизий и не мог заставить интервал работать. Я использовал поля. В моем случае я решил, что на 90% экрана будут заполнены divs и 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%; под @media (max-width:1023px)

Ответ 12

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

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

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

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

Ответ 13

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

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

Ответ 14

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

Ответ 15

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

Ответ 16

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

Ответ 17

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

Ответ 18

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

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

Ответ 19

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

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

и first + last child no border

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

Ответ 20

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

Ответ 21

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

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

Ответ 22

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

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

Ответ 23

Bootstrap 4

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

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

Таким образом, правильный ответ: установите col s 'padding-left/right равным минусу поля row влево/вправо. Так просто.

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

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

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

Ответ 24

В соответствии с документацией Bootstrap 4 documentation вы должны предоставить родителю отрицательное поле 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>

Ответ 25

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>

Ответ 26

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