Bootstrap网格系统中的列边框无法正常显示。

Question

我正在使用Bootstrap创建一个页面，在该页面中，我在一行内使用了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;
}

问题在于边框应该由Bootstrap网格的自然间距分隔，但这不起作用。

你能帮助我吗？谢谢。

- Mauro Barrionuevo

---

我在你的代码片段中没有看到任何东西。此外，你的HTML中也没有包括类cliente。 - Macsupport

Mauro，你忘记了类.cliente，请看一下Skelly的答案，它是正确的。显然，如果你想要侧边框，你只需要使用border-left或border-right，但这基本上就是要点。 - Devin

Done, @ZimSystem. - Mauro Barrionuevo

Answer 1

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

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

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

- Zim

---

谢谢您，Skelly！我忘记在列内使用div了！ - Mauro Barrionuevo

Answer 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;
 }

- Carlos Macias

Answer 3

关于outline的解决方案，如果您想要一个边框，在相邻的两列都有边框时缩小到相同的大小，请使用box-shadow：

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

box-shadow 相对于 outline 的不足之处在于，任何浏览器都可能将 box-shadow 渲染在亚像素位置，而轮廓和边框则会捕捉到最近的像素。如果 box-shadow 出现在亚像素位置，它会呈现出模糊或柔和的效果。唯一避免这种情况的方法是确保不对列进行使其对齐于亚像素位置的操作。

- Adam Leggett