在 Bootstrap 3 中的面板之间添加空格答案

【问题标题】：Add spaces between panels in Bootstrap 3在 Bootstrap 3 中的面板之间添加空格
【发布时间】：2013-10-30 07:41:36
【问题描述】：

我正在使用 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%，但它仅在您有两个面板并将其中一个向右拉时才有效。如果我添加一个边距，那么它会关闭响应性并且最后一个单元格会下降到下一行。

如何响应式地在面板之间添加间隙？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以像这样使用并根据需要划分为任意数量的列。

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

【讨论】：

【解决方案2】：

我倾向于不结合 .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>

【讨论】：

【解决方案3】：

我设法通过在前 2 个面板中添加一个类 panel-4 来实现此功能：

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

【讨论】：

使用 CSS 覆盖使您的应用程序复杂化可能不如适度重组以符合 Bootstrap 的意图。这可能会使维护和升级更加困难。

【解决方案4】：

像下面这样更改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>

【讨论】：