如何使用Bootstrap边界
我怎么解决这个问题？ 当您将边框添加到div时，div不居中， span12类不居中。
我想以边界为中心
<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>
不幸的是，这就是边界所做的事情，它们被视为一个元素占据的空间的一部分。 请允许我介绍一下边界不那么常见的表弟： outline 。 它几乎与边界相同。 唯一不同的是，它的行为更像是box-shadow，因为它不占用布局空间，而且必须位于元素的所有四边。
http://codepen.io/cimmanon/pen/wyktr
.foo { outline: 1px solid orange; }
从Bootstrap 3开始，可以使用Panel类：
<div class="panel panel-default">Surrounded by border</div>
CSS box-sizing.有一个名为box-sizing.的属性box-sizing. 它决定了页面上元素的总宽度。 默认值是content-box ，它不包含元素的填充，边距或边框。
因此，如果你设置一个div width: 500px和20px ，那么你的网站会占用540px （500 + 20 + 20）。
这是什么导致你的问题。 Bootstrap就像上面的例子一样计算事物的设置宽度，这些东西没有边界。 由于Bootstrap拼装在一起就像拼图一样，在其中一边添加边框会产生501px的总宽度（继续上面的示例）并打破布局。
解决这个问题最简单的方法就是调整你的box-sizing 。 您将使用的值是box-sizing: border-box 。 这包括框元素中的填充和边框。 你可以在这里阅读更多关于盒子大小的信息。
这个解决scheme的一个问题是它只能在IE8 +上运行。 因此，如果您需要更深入的IE支持，则需要覆盖Bootstrap宽度以考虑您的边框。
举一个如何计算新宽度的例子，首先检查Bootstrap在元素上设置的宽度。 假设这是一个span6 ，宽度为320px （这完全是假设，span6的实际宽度取决于Bootstrap的具体configuration）。 如果你想在右边添加一个20px的单边框，你可以在样式表中写这个CSS
.span6 { padding-right: 20px; border-right: 1px solid #ddd; width: 299px; }
新宽度的计算方法如下：
old width - padding - border
其他人提到的关于边框与边框的问题绝对是正确的。 你仍然可以得到这个工作，而不必创build任何自定义类： 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; }
祝你好运！
虽然这可能不是正确的方法，但是我发现一个简单的解决方法是简单地使用box-shadow而不是边框…这不会中断网格系统。 例如，你的情况：
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; }
小提琴
根据你想要div大小，你可以利用Bootstrap内置的组件thumbnail类，以及（或不）网格系统在你的每个div项目周围创build边框。
Bootstrap网站上的这些示例演示了易用性和对任何特殊附加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网格项目：
你不能只是添加一个边界的跨度，因为它会打破布局，因为宽度计算的方式：宽=边框+填充+宽度。 由于容器为940像素，跨度为940像素，因此添加2像素边框（所以总共4像素）将使其看起来偏离中心。 解决方法是将宽度更改为包含4px边框（原始 – 4px），或者在其中创build2px边框。
