Я впевнений, що тут є просте рішення цієї проблеми. Якщо я маю два стовпчики, як я можу додати пробіл між ними?

наприклад, якщо HTML:

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

Вихід буде просто двома стовпцями поруч один з одним, займаючи всю ширину сторінки. Скажіть, ширина була встановлена, щоб 1000pxтоді кожен дів був 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>

Це автоматично візуалізує деякий простір між двома дівами.

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

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

Попросіть це

ви можете використовувати фон-кліп та модель-коробку з прикордонним майном

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

Цей підхід вимагає внутрішнього поділу з негативними полями, як і для завантажувального класу "рядок". І цей дів, який ми назвали його "піднятий блок", повинен бути прямим побратимом колони

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

Основним недоліком цього підходу є те, що він вимагає додаткової розмітки, що загортає вміст кожного стовпця. Для нас це працює, оскільки для досягнення потрібного вигляду потрібен простір між ними лише для конкретних стовпців.

Це дозволить пробіл між двома стовпцями, і, очевидно, якщо ви хочете змінити ширину за замовчуванням, ви можете перейти до mixins, щоб змінити ширину завантажувача за замовчуванням. Або ви можете надати ширину, використовуючи вбудований стиль CSS.

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

Ви можете домогтися проміжку між стовпцями, використовуючи класи 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>

Використовуйте .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 малюнок, ніж ви можете легко додати набивки, як це.

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

Запуск 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%;нижче@media (max-width:1023px)

Оскільки ви використовуєте завантажувальний інструмент , я думаю, ви хочете зробити цю річ чуйною . У такому випадку ви не повинні використовувати фіксовані розміри, наприклад, у "px".

В якості вирішення інших рішень я пропоную зробити обидва стовпці "col-md-5" замість "col-md-6", а потім у батьківський елемент "рядок", який містить стовпці, додати клас "justify-content "Між", яка ставить вільний простір посередині, як ви можете перевірити тут документацію для завантаження

Це рішення також дійсне для більш ніж двох стовпців, регулюючи звичайно "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>

Для того, щоб створити простір між групами, я переоцінив поле завантаження bootstrap -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>

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

вибірка вибірки

Просто біла рамка навколо обгортання елемент

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

Це за замовчуванням надає деяку підкладку всередині зовнішнього діла так, як вам здається, потрібно. Крім того, ви також можете змінити прокладку за допомогою спеціального CSS.

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

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

Завантаження 4

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

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

Таким чином, правильна відповідь: встановіть col'sding pad-left / right, рівний мінусу вашого rowmargin-left / right. Це просто.

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

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

Демонстрація: https://codepen.io/frouo/pen/OqGaWN

Запуск 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>

Використання поля зліва - це шлях:

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

працює чудово

З останньою версією завантаження можна використовувати "картки"