Bootstrap Grid 列之间的边界不起作用

Posted 2023-03-07

【中文标题】Bootstrap Grid 列之间的边界不起作用

【英文标题】：Borders between columns of Bootstrap Grid not working

【发布时间】：2014-11-24 03:05:37

【问题描述】：

我正在引导程序中创建一个页面，其中我在一行中使用 4 个列。代码：

<div class="row text-center">
    <div class="col-md-3"> </div>
    <div class="col-md-3"> </div>
    <div class="col-md-3"> </div>
    <div class="col-md-3"> </div>
</div>

我为每个列添加了一个类，因此每个列都可以有一个边框。

.cliente 
    margin-top:10px;
    border: #cdcdcd medium solid;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;

问题是边界应该被引导网格的自然排水沟分开，这是行不通的。

你能帮帮我吗？谢谢。

【问题讨论】：

我在您的代码 sn-p 中没有看到任何内容。此外，您的 html 不包含类 cliente

Mauro，你忘了 .cliente 类，看看 Skelly 的回答，没错。显然，如果你想要侧边框，你只需要使用左边框或右边框，但这基本上就是它的要点

完成，@ZimSystem。

【参考方案1】：

您需要在列内使用另一个块元素（即 DIV），因为 Bootstrap 'col-*' 使用填充来创建网格列之间的间距或“gutter”。

 <div class="row text-center">
      <div class="col-md-3"> 
        <div class="cliente"> 
          ..
        </div>
      </div>
 </div>

演示：http://www.bootply.com/71ZVOWCFWu

【讨论】：

谢谢斯凯利！我忘了在列内使用 div！

【参考方案2】：

您可以使用outline 属性。不需要cliente div。

.row > div 
    margin-top:10px;
    padding: 20px;
    outline: 2px solid #ccc;
    outline-offset: -10px;
    -moz-outline-radius: 10px;
    -webkit-outline-radius: 10px;
 

【参考方案3】：

我做了一个不需要额外元素的版本，但可能会受到高度不等的影响：

How can I add a line between two columns using Twitter Bootstraps grid system

【参考方案4】：

要扩展 outline 解决方案，如果您希望在两个相邻列都有边框的情况下折叠到相同大小的边框，请使用 box-shadow：

box-shadow: -.5px -.5px 0 .5px #ccc, inset -1px -1px 0 0 #ccc;

box-shadow 与 outline 的缺点是 box-shadow 可以由任何浏览器在亚像素位置呈现，而轮廓和边框会捕捉到最近的像素。如果box-shadow 最终位于子像素位置，它会显得柔和或模糊。避免这种情况的唯一方法是确保您不会做会导致列在子像素位置上对齐的事情。