在两个Bootstrap列之间创建用户定义的间隙 [英] Create a user-defined gap between two Bootstrap columns

问题描述

我想为我的界面创建小面板/仪表板.就我而言，我希望有两个这样的面板

I want to create little panels/dashboard for my interface. In my case I want to have two panels like so

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

使用Bootstrap 3通常很容易.

Generally it is easy with 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间隙，因为那样两边的大小都不相等.

The problem is, the gap of col-md-2, as it is the case here, is way too big. I cannot use a col-md-1 gap, because then both sides do not have an equal size.

我也尝试向右和向左添加填充，但这也没有效果.我在这里可以做什么?

I also tried to add padding right and left, but that had not effect, too. What can I do here?

推荐答案

您可以添加一个修改 col-md-6 宽度的类.此类的宽度设置为 50％.像这样减小宽度可以减小间隙:

You could add a class which modifies the width of col-md-6. The width of this class is set to 50%. A smaller gap is achieved by reducing the width like so:

.dashboard-panel-6 {
   width: 45%;
}

将此添加到div元素中.这样， col-md-6 的宽度规则将被覆盖.

Add this to your div elements. This way the width rule of col-md-6 gets overriden.

<div class="row">
  <div class="col-md-6 dashboard-panel-6">...</div>
  <div class="col-md-6 dashboard-panel-6">...</div>
</div>

这篇关于在两个Bootstrap列之间创建用户定义的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！