在两个Bootstrap列之间创建用户定义的间隙

Question

我想为我的界面创建小面板/仪表板.在我的情况下,我希望有两个这样的面板

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

通常使用Bootstrap 3很容易.

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

问题是,col-md-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;
 }