Создайте пользовательский промежуток между двумя столбцами Bootstrap

Question

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

+-------------------------------+ +-------------------------------+ 
|        | |        | 
|        | |        | 
+-------------------------------+ +-------------------------------+ 

Вообще легко с Bootstrap 3.

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

Проблема заключается в том, зазор Col-мкр-2, так как это случай здесь, слишком большой. Я не могу использовать пробел col-md-1, потому что тогда обе стороны не имеют равного размера.

Я также попытался добавить прокладку справа и слева, но это тоже не повлияло. Что я могу сделать здесь?

Answer 1

Вы можете добавить класс, который изменяет ширину col-md-6. Ширина этого класса равна 50%. Меньший зазор достигается за счет уменьшения ширины таким образом:

.dashboard-panel-6 { 
    width: 45%; 
} 

Добавьте это к вашим элементам div. Таким образом, правило ширины col-md-6 становится выше.

<div class="row"> 
    <div class="col-md-6 dashboard-panel-6">...</div> 
    <div class="col-md-6 dashboard-panel-6">...</div> 
</div> 

Answer 2

Вы можете использовать другой div внутри и дать дополнение к этому.

<div class="row"> 
    <div class="col-md-6"> 
    <div class="inner-div"> 
    </div> 
    </div> 
    <div class="col-md-6 pull-right"> 
    <div class="inner-div"> 
    </div> 
    </div> 
</div> 

.inner-div{ 
    padding: 5px; 
} 

Answer 3

Вот еще одна возможность:
Live view
Edit view

Вы увидите, что он использует 2 Col-й мкр-6, каждый с вложенной COL-MD-11, и вы позиционируете вложенную строку во втором div справа.

Предложение от Ken имеет чистый HTML-код, который мне нравится. Если ваши левая и правая панели используют элементы с шириной, определенной Bootstrap (например, лунки или элементы формы), то заполнение столбцов может вызвать проблемы и нарушить макет. В этом случае этот вложенный подход может быть проще.

HTML

<div class="container"> 
    <div class="row"> 

    <div class="col-md-6"> 
     <div class="row"> 
     <div class="col-md-11">nested row col-md-11</div> 
     </div><!-- end nested row --> 
    </div> 

    <div class="col-md-6"> 
     <div class="row"> 
     <div class="col-md-11 col-md-offset-1">nested row col-md-11</div> 
     </div><!-- end nested row --> 
    </div> 

    </div> 
</div> 

Успехов!

Answer 4

Я разместил это here уже, но он по-прежнему имеет отношение к исходному вопросу.

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

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

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

Надеется, что это помогает