Как увеличить отступы между колонками с помощью Bootstrap 3.0

Я относительно новичок в программировании и делаю веб-сайт с помощью bootstrap 3.0.

Я хочу сделать две строки, которые центрируются в середине страницы. Для первой строки я использовал div class="col-md-4 col-md-offset-2" и для второго ряда div class="col-md-4".

мой первый вопрос, если это нормально, что это добавляет до 10 строк вместо 12 или если мне нужно указать 2 строки справа тоже? Если да, то как это можно сделать?

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

спасибо заранее.

7
grid-layout spacing twitter-bootstrap-3

2 ответов

Вопрос 1: Да, это нормально, чтобы оставить болтающееся пространство после ваших столбцов, но хорошая практика, чтобы связать его, закрыв .row после него.

Вопрос 2: вы можете добавить поле слева и справа от столбца. Но это отбрасывает столбец смещения, поэтому обходите это, помещая пустое .col-md-2 перед ними. 

<div class="container">
  <div class="row">
   <div class="col-md-2"></div><!-- empty -->
    <div class="col-md-4 margin">col-md-4</div>
    <div class="col-md-4 margin">col-md-4</div>
  </div>
</div>

CSS:

.margin {
  margin-left:10px;
  margin-right:10px;
  }

демо: http://www.bootply.com/OS6FX9sie8#

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

5

похоже, это то, что вы хотите 

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

его прекрасно, чтобы столбец не складывался до 12

здесь bootply

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

9