问如何通过Bootstrap使用边框

EN

不幸的是，这就是边框的作用，它们被算作元素占据的空间的一部分。请允许我介绍一下border不太为人所知的表亲：outline。它实际上与border相同。唯一不同的是，它的行为更像长方体阴影，因为它不会占用布局中的空间，而且它必须位于元素的所有4个边。

http://codepen.io/cimmanon/pen/wyktr

.foo {
    outline: 1px solid orange;
}

从Bootstrap 3开始，您可以使用Panel类：

<div class="panel panel-default">Surrounded by border</div>

在Bootstrap 4中，您可以使用边界类：

<div class="border border-secondary">Surrounded by border</div>

CSS中有一个名为box-sizing.的属性，它决定了页面上元素的总宽度。默认值是content-box，它不包括元素的填充、边距或边框。

因此，如果你设置了一个div来填充width: 500px和20px，它将占用你网站上的540px (500 + 20 + 20)。

这就是导致您的问题的原因。Bootstrap就像上面的例子一样计算集合宽度，这些东西没有边界。由于Bootstrap像拼图一样拼凑在一起，因此在其中一条边添加边框将产生501px的总宽度(继续上面的例子)，并破坏您的布局。

解决这个问题最简单的方法是调整你的box-sizing。您将使用的值是box-sizing: border-box。这包括box元素中的填充和边框。You can read more about box-sizing here.

这个解决方案的一个问题是它只适用于IE8+。因此，如果你需要更深入的IE支持，你需要覆盖Bootstrap宽度来考虑你的边框。

为了给出一个如何计算新宽度的示例，首先检查Bootstrap在元素上设置的宽度。假设它是一个span6，宽度为320px (这纯粹是假设的，span6的实际宽度将取决于您特定的Bootstrap配置)。如果您想要在右侧添加一个边框，在那里填充20px，那么您可以在样式表中编写以下CSS

.span6 {
  padding-right: 20px;
  border-right: 1px solid #ddd;
  width: 299px;
 }

其中，新宽度的计算公式为：

old width - padding - border