Bootstrap - Небольшое расстояние между столбцами

Question

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

<div class="container"> 
    <div class="col-md-12 banner"></div> 

    <div class="row"> 
     <div class="col-md-8"> 
      <div class="col-md-12 leftSide"> 

      </div> 
      <div class="col-md-12 leftSide"> 

      </div> 
     </div> 

     <div class="col-md-4 rightSide"> 
      <div class="col-md-12"> 

      </div> 
     </div> 
    </div> 

</div> 

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

Это можно увидеть более ясно на скрипке: http://www.bootply.com/gMBrLvaK5C

Проблема заключается панель в «RightSide».

Как я могу сохранить это расстояние между «leftSide» и «rightSide» и исправить переполнение правого столбца (потому что интервал слишком сильно увеличивается, если я попытаюсь достичь интервала с столбцами)? Или что это лучший способ достичь этого?

Answer 1

это мое личное решение, вместо того, чтобы добавить класс на колоннах, создать DIV внутри колонки, то вы можете разместить div.banner и div.block как мой пример:

http://www.bootply.com/PEIiDnp9VD

<div class="container"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div class="banner"></div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-8"> 
     <div class="block"></div> 
    </div> 
    <div class="col-md-4"> 
     <div class="block"></div> 
    </div> 
    </div> 
</div> 

Если вы хотите меньше места между столбцами, вы можете просто переопределить класс Bootstrap col-md-*, добавив класс в столбцы, изменяя пробелы влево и вправо.

Answer 2

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

<div class="row"> 
    <div class="col-md-8 leftSide"> 
     <div class="row"> 
      <div class="col-md-12"> 

      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 

      </div> 
     </div> 
    </div> 

    <div class="col-md-4 rightSide"> 
     <div class="row"> 
      <div class="col-md-12"> 

      </div> 
     </div> 
    </div> 
</div> 

Затем примените настраиваемые поля и стили к элементам внутри столбцов, а не к самим столбцам.

http://www.bootply.com/g6eLHRd1tH