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

前端之家收集整理的这篇文章主要介绍了css – 在两个Bootstrap列之间创建用户定义的间隙前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想为我的界面创建小面板/仪表板.在我的情况下,我希望有两个这样的面板
+-------------------------------+    +-------------------------------+
|                               |    |                               |
|                               |    |                               |
+-------------------------------+    +-------------------------------+

通常使用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间隙,因为那时双方都没有相同的尺寸.

我也尝试左右添加填充,但这也没有效果.我能在这做什么?

解决方法

您可以添加一个修改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>

猜你在找的CSS相关文章