我该如何解决这个问题？
当您向 div 添加边框时，该 div 不居中并且
span12 类未居中。
我想将 div 与边框居中
<div class="row" >
<div class="span12" style="border: 2px solid black">
<div class="row">
<div class="span4">
1
</div>
<div class="span4">
2
</div>
<div class="span4">
3
</div>
</div>
</div>
</div>
【问题讨论】：
box-sizing: border-box;
标签： css twitter-bootstrap border
如果您使用的是 Bootstrap 4 及更高版本，请尝试使用 border border-primary 在空 div 周围设置边框，这是我的代码示例：
<div class="row border border-primary">
<div class="col border border-primary">logo</div>
<div class="col border border-primary">navbar</div>
</div>
这是 Bootstrap 4 中边框实用程序的链接： https://getbootstrap.com/docs/4.2/utilities/borders/
【讨论】：
从 Bootstrap 3 开始，您可以使用 Panel 类：
<div class="panel panel-default">Surrounded by border</div>
在 Bootstrap 4 中，您可以使用 Border 类：
<div class="border border-secondary">Surrounded by border</div>
【讨论】：
如果你需要一个基本的边框，你只需要使用引导井。
例如下面的代码：
<div class="well">Basic Well</div>
【讨论】：
panel 没问题，但在侧边栏或其他井中看起来很糟糕，其背景为白色。只需使用另一口井即可。
根据您希望 div 的大小，您可以使用 Bootstrap 的内置组件 thumbnail 类，以及（或不使用）网格系统在每个 div 项目周围创建边框。
Bootstrap 网站上的These examples 展示了易用性和无需任何特殊附加CSS：
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
生成以下div 网格项：
或添加一些额外的内容：
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>
<a href="#" class="btn btn-primary" role="button">Button</a>
<a href="#" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>
</div>
</div>
生成以下div 网格项：
【讨论】：
thumbnail 示例，我能够为div 标签创建简单的边框。我的赞成票。
虽然这可能不是正确的方法，但我发现一个简单的解决方法是简单地使用框阴影而不是边框......这不是t 打破网格系统。例如，在您的情况下：
HTML
<div class="container">
<div class="row" >
<div class="span12">
<div class="row">
<div class="span4">
1
</div>
<div class="span4">
2
</div>
<div class="span4">
3
</div>
</div>
</div>
</div>
</div>
CSS
.span12{
-moz-box-shadow: 0 0 2px black;
-webkit-box-shadow: 0 0 2px black;
box-shadow: 0 0 2px black;
}
【讨论】：
其他人提到的边框与边框框绝对是正确的。不过，您仍然可以让它工作而无需创建任何自定义类：http://jsfiddle.net/panchroma/yfzdD/
HTML
<div class="container">
<div class="row" >
<div class="span12">
<div class="row">
<div class="span4"> 1 </div>
<div class="span4"> 2 </div>
<div class="span4"> 3 </div>
</div><!-- end nested row -->
</div><!-- end span 12 -->
</div> <!-- end row -->
</div><!-- end container -->
CSS
.span12{
border:solid 2px black;
background-color:grey;
}
祝你好运！
【讨论】：
不幸的是，边框就是这样做的，它们被视为元素占用空间的一部分。请允许我介绍一下 Border 鲜为人知的表弟：outline。它实际上与边界相同。唯一的区别是它的行为更像是 box-shadow，因为它不占用布局中的空间，并且它必须位于元素的所有 4 个边上。
http://codepen.io/cimmanon/pen/wyktr
.foo {
outline: 1px solid orange;
}
【讨论】：
CSS 中有一个名为box-sizing. 的属性，它决定了页面上元素的总宽度。默认值为content-box，不包括元素的内边距、外边距或边框。
因此，如果您将div 设置为周围有width: 500px 和20px 填充，它将在您的网站上占用540px (500 + 20 + 20)。
这就是导致您的问题的原因。 Bootstrap 会像上面的例子一样计算设置的宽度，这些东西没有边框。由于 Bootstrap 像拼图一样组合在一起，因此向其中一侧添加边框会产生 501px 的总宽度（继续上面的示例）并破坏您的布局。
解决此问题的最简单方法是调整您的box-sizing。您将使用的值为box-sizing: border-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
【讨论】：
您不能只为跨度添加边框，因为它会破坏布局，因为宽度的计算方式是：宽度 = 边框 + 填充 + 宽度。由于容器是 940 像素，跨度是 940 像素，添加 2 像素边框（所以总共 4 像素）会使它看起来偏离中心。解决方法是更改宽度以包含 4px 边框（原始 - 4px）或在内部创建另一个 div 以创建 2px 边框。
【讨论】：
box-sizing: border-box，无需解决方法。