CSS 如何在 Bootstrap 中使用边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15328679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use border with Bootstrap
提问by the_martux
How can I solve this problem?
When you add borders to a div, the div is not centered and
the span12class is not centered.
我怎么解决这个问题？向 div 添加边框时，div 不居中，span12类也不居中。
I would like to center the div with the borders
我想将 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>
回答by cimmanon
Unfortunately, that's what borders do, they're counted as part of the space an element takes up. Allow me to introduce border's less commonly known cousin: outline. It is virtually identical to border. Only difference is that it behaves more like box-shadow in that it doesn't take up space in your layout and it has to be on all 4 sides of the element.
不幸的是，这就是边框的作用，它们被视为元素占用空间的一部分。请允许我介绍一下 border 鲜为人知的堂兄： outline. 它实际上与边界相同。唯一的区别是它的行为更像 box-shadow，因为它不占用布局中的空间，并且它必须位于元素的所有 4 个侧面。
http://codepen.io/cimmanon/pen/wyktr
http://codepen.io/cimmanon/pen/wyktr
.foo {
outline: 1px solid orange;
}
回答by Prague
As of Bootstrap 3, you can use Panel classes:
从 Bootstrap 3 开始，您可以使用 Panel 类：
<div class="panel panel-default">Surrounded by border</div>
<div class="panel panel-default">Surrounded by border</div>
In Bootstrap 4, you can use Border classes:
在 Bootstrap 4 中，您可以使用 Border 类：
<div class="border border-secondary">Surrounded by border</div>
<div class="border border-secondary">Surrounded by border</div>
回答by jamesplease
There's a property in CSS called box-sizing.It determines the total width of an element on your page. The default value is content-box, which doesn't include the padding, margin, or border of the element.
CSS 中有一个名为box-sizing.It的属性，它决定了页面上元素的总宽度。默认值为content-box，不包括元素的内边距、边距或边框。
Hence, if you set a divto have width: 500pxand 20pxpadding all around, it will take up 540pxon your website (500 + 20 + 20).
因此，如果您将 a 设置div为 havewidth: 500px和20pxpadding，它将占用540px您的网站 (500 + 20 + 20)。
This is what is causing your problem. Bootstrap calculates set widths for things just like the above example, and these things don't have borders. Since Bootstrap fits together like a puzzle, adding a border to one of the sides would yield a total width of 501px (continuing the above example) and break your layout.
这就是导致您出现问题的原因。Bootstrap 像上面的例子一样计算事物的设置宽度，并且这些事物没有边框。由于 Bootstrap 像拼图一样组合在一起，在其中一侧添加边框将产生 501px 的总宽度（继续上面的示例）并破坏您的布局。
The easiest way to fix this is to adjust your box-sizing. The value you would use is box-sizing: border-box. This includes the padding andborder in your box elements. You can read more about box-sizing here.
解决此问题的最简单方法是调整您的box-sizing. 您将使用的值为box-sizing: border-box. 这包括框元素中的填充和边框。你可以在这里阅读更多关于盒子尺寸的信息。
A problem with this solution is that it only works on IE8+. Consequently, if you need deeper IE support you'll need to override the Bootstrap widths to account for your border.
这个解决方案的一个问题是它只适用于 IE8+。因此，如果您需要更深入的 IE 支持，您将需要覆盖 Bootstrap 宽度以考虑您的边框。
To give an example of how to calculate a new width, begin by checking the width that Bootstrap sets on your element. Let's say it's a span6and has a width of 320px(this is purely hypothetical, the actual width of your span6 will depend on your specific configuration of Bootstrap). If you wanted to add a single border on the right hand side with a 20px padding over there, you'd write this CSS in your stylesheet
要举例说明如何计算新宽度，请先检查 Bootstrap 在元素上设置的宽度。假设它是 aspan6并且宽度为320px（这纯粹是假设，span6 的实际宽度将取决于您对 Bootstrap 的特定配置）。如果您想在右侧添加一个带有 20px 填充的边框，您可以在样式表中编写此 CSS
.span6 {
padding-right: 20px;
border-right: 1px solid #ddd;
width: 299px;
}
where the new width is calculated by:
其中新宽度的计算方式为：
old width - padding - border
old width - padding - border
回答by Blairg23
Depending what size you want your divto be, you could utilize Bootstrap's built-in component thumbnailclass, along with (or without) the grid system to create borders around each of your divitems.
根据您想要的大小div，您可以使用 Bootstrap 的内置组件thumbnail类以及（或不使用）网格系统在每个div项目周围创建边框。
These exampleson Bootstrap's website demonstrates the ease-of-use and lack of need for any special additional CSS:
Bootstrap 网站上的这些示例演示了易用性和不需要任何特殊附加CSS：
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
which produces the following divgrid items:
它产生以下div网格项目：
or add some additional content:
或添加一些额外的内容：
<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>
which produces the following divgrid items:
它产生以下div网格项目：
回答by David Taiaroa
What others have mentioned about border vs border box is definitely correct. You can still get this to work without having to create any custom classes though: http://jsfiddle.net/panchroma/yfzdD/
其他人提到的关于边框与边框框的内容绝对是正确的。你仍然可以让它工作而无需创建任何自定义类：http: //jsfiddle.net/panchroma/yfzdD/
HTML
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
CSS
.span12{
border:solid 2px black;
background-color:grey;
}
Good luck!
祝你好运！
回答by brbcoding
While it's probably not the correctway to do it, something that I've found to be a simple workaround is to simply use a box-shadow rather than a border... This doesn't break the grid system. For example, in your case:
虽然这可能不是正确的方法，但我发现一个简单的解决方法是简单地使用框阴影而不是边框......这不会破坏网格系统。例如，在您的情况下：
HTML
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
CSS
.span12{
-moz-box-shadow: 0 0 2px black;
-webkit-box-shadow: 0 0 2px black;
box-shadow: 0 0 2px black;
}
回答by David Nguyen
You can't just add a border to the span because it will break the layout because of the way width is calculate: width = border + padding + width. Since the container is 940px and the span is 940px, adding 2px border (so 4px altogether) will make it look off centered. The work around is to change the width to include the 4px border (original - 4px) or have another div inside that creates the 2px border.
您不能只向跨度添加边框，因为它会因为宽度的计算方式而破坏布局：宽度 = 边框 + 填充 + 宽度。由于容器是 940 像素，跨度是 940 像素，添加 2 像素边框（总共 4 像素）会使它看起来偏离中心。解决方法是更改宽度以包含 4px 边框（原始 - 4px）或在内部使用另一个 div 来创建 2px 边框。
回答by Khatx Albert
If you need a basic border around you just need to use bootstrap wells.
如果你需要一个基本的边界，你只需要使用引导井。
For example the code below:
例如下面的代码：
<div class="well">Basic Well</div>
