it-roy-ru.com

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

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

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

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

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

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

164
Muhammed Bhikha

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

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

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

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

enter image description here

285
Utpal - Ur Best Pal

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

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

Попробуй это

65
Robin Jonsson

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

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

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

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

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

 enter image description here

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

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

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

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

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

10
Joe Fitzgibbons

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

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

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

.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>
9
Ali El Habchi

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

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;

4
Ivan Djordevic

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

Я должен был выяснить, как сделать это для 3 столбцов. Я хотел закруглить углы делений и не мог заставить интервал работать. Я использовал поля. В моем случае я рассчитывал, что 90% экрана будет заполнено элементами div и 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)

2
Laser One Jim

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

1
drvictor666

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

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

0
Brian

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

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

пример вывода 

 enter image description here

0
arulraj

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

.row div{
  padding-left: 8px;
  padding-right: 8px;
}
0
Vladislav Koshenevskiy
<div class="col-md-6">
    <div class="inner">
        <!-- Put the col-6 elements in the inner div -->
    </div>
</div>

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

0
Akshay R

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

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

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

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

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

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

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

0
Hugo
    <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;
}
0
RITHIN K

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

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 with custom spacing 

0
frouo