Добавить пробелы между панелями в Bootstrap 3

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

<div class="row">
  <div class="col-xs-4 panel">
    <div class="panel-body">
      <h4>First Cell</h4>
    </div>
  </div>
  <div class="col-xs-4 panel">
    <div class="panel-body">
      <h4>Second Cell</h4>
    </div>
  </div>
  <div class="col-xs-4 panel">
    <div class="panel-body">
      <h4>Third Cell</h4>
    </div>
  </div>
</div>

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

Как я могу реагировать на разрыв между панелями?

Ответы

Ответ 1

Я был бы склонен не комбинировать .panel и .col *:

http://jsfiddle.net/isherwood/xTc7a/1/

<div class="row">
    <div class="col-xs-4">
        <div class=" panel">
            <div class="panel-body">
                 <h4>First Cell</h4>

            </div>
        </div>
    </div>
    <div class="col-xs-4">
        <div class=" panel">
            <div class="panel-body">
                 <h4>Second Cell</h4>

            </div>
        </div>
    </div>
    <div class="col-xs-4">
        <div class=" panel">
            <div class="panel-body">
                 <h4>Third Cell</h4>

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

Ответ 2

измените html, как показано ниже,

<div class="row">
    <div class="col-xs-4">
      <div class="panel">
          <div class="panel-body">
               <h4>First Cell</h4>

          </div>
      </div>
    </div>
    <div class="col-xs-4">
    <div class="panel">
        <div class="panel-body">
             <h4>Second Cell</h4>

        </div>
    </div>
    </div>
    <div class="col-xs-4">
    <div class="panel">
        <div class="panel-body">
             <h4>Third Cell</h4>

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

Ответ 3

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

<div class="row">
  <div class="col-md-6">
     <div class="col-md-12">
        <div class=" panel">
        <div class="panel-body">
             <h4>First Cell</h4>
        </div>
    </div>
     </div>
  </div>
  <div class="col-md-6">
     <div class="col-md-12">
        <div class=" panel">
        <div class="panel-body">
             <h4>Second Cell</h4>
        </div>
    </div> 
     </div>
  </div>
</div>

Ответ 4

Мне удалось заставить это работать, добавив панель класса 4 к первым двум панелям:

.panel-4 {
  width:30%;
  margin-right:5%;
}