Html bootstrap 3 容器上的 box-shadow
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18262972/
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
box-shadow on bootstrap 3 container
提问by sloewen
I'm building a little website using bootstrap. The base structure looks like this:
我正在使用引导程序构建一个小网站。基本结构如下所示：
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css" rel="stylesheet">
<style tpye="text/css">
.row {
height: 100px;
background-color: green;
}
.container {
margin-top: 50px;
box-shadow: 0 0 10px 10px black; /*THIS does not work as expected*/
}
</style>
</head>
<body>
<div class="container">
<div class="row">one</div>
<div class="row">two</div>
<div class="row">three</div>
</div>
</body>
</html>
See it in action: http://jsfiddle.net/ZDCjq/
看到它在行动：http: //jsfiddle.net/ZDCjq/
Now I want the whole site to have a dropshadow on all 4 sides. The problem is, that the bootstrap grid makes use of negative margins and this makes the rows overlap the shadow.
现在我希望整个网站在所有 4 个方面都有一个阴影。问题是，引导网格使用负边距，这使得行与阴影重叠。
Is there a way to accomplish this while leaving all bootstrap functionality intact?
有没有办法在保持所有引导功能完整的同时实现这一点？
EDIT: The expected result is this: http://i.imgur.com/rPKuDhc.png
编辑：预期的结果是这样的：http: //i.imgur.com/rPKuDhc.png
EDIT: this problem was only present until bootstrap 3 rc2. the final bootstrap 3 makes the workaround below obsolete.
编辑：这个问题只存在于 bootstrap 3 rc2 之前。最终的引导程序 3 使下面的解决方法过时了。
采纳答案by benny
@import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css");
.row {
height: 100px;
background-color: green;
}
.container {
margin-top: 50px;
box-shadow: 0 0 30px black;
padding:0 15px 0 15px;
}
<div class="container">
<div class="row">one</div>
<div class="row">two</div>
<div class="row">three</div>
</div>
</body>
回答by mattsnowkygov
Add an additional div around all container divs you want the drop shadow to encapsulate. Add the classes drop-shadow and container to the additional div. The class .container will keep the fluidity. Use the class .drop-shadow (or whatever you like) to add the box-shadow property. Then target the .drop-shadow div and negate the unwanted styles .container adds--such as left & right padding.
在您希望阴影封装的所有容器 div 周围添加一个额外的 div。将类 drop-shadow 和 container 添加到额外的 div。.container 类将保持流动性。使用类 .drop-shadow （或任何你喜欢的）来添加 box-shadow 属性。然后定位 .drop-shadow div 并否定 .container 添加的不需要的样式 - 例如左右填充。
Example: http://jsfiddle.net/SHLu4/2/
示例：http: //jsfiddle.net/SHLu4/2/
It'll be something like:
它会是这样的：
<div class="container drop-shadow">
<div class="container">
<div class="row">
<div class="col-md-8">Main Area</div>
<div class="col-md-4">Side Area</div>
</div>
</div>
</div>
And your CSS:
还有你的 CSS：
<style>
.drop-shadow {
-webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 5px 2px rgba(0, 0, 0, .5);
}
.container.drop-shadow {
padding-left:0;
padding-right:0;
}
</style>
回答by IamFace
For those wanting the box-shadow on the col-*container itself and not on the .container, you can add another divjust inside the col-*element, and add the shadow to that. This element will not have the padding, and therefor not interfere.
对于那些想要在col-*容器本身而不是在 上的 box-shadow的人.container，您可以div在col-*元素内部添加另一个，并将阴影添加到其中。这个元素不会有填充，因此不会干扰。
The first image has the box-shadowon the col-*element. Because of the 15px padding on the colelement, the shadow is pushedto the outside of the divelement rather than on the visual edges of it.
第一个图像box-shadow在col-*元素上有 。由于col元素上的 15px 填充，阴影被推到div元素的外部而不是它的视觉边缘。
<div class="col-md-4" style="box-shadow: 0px 2px 25px rgba(0, 0, 0, .25);">
<div class="thumbnail">
{!! HTML::image('images/sampleImage.png') !!}
</div>
</div>
The second image has a wrapper divwith the box-shadowon it. This will place the box-shadowon the visual edges of the element.
第二张图片有一个包装器div，box-shadow上面有 。这会将 放置box-shadow在元素的可视边缘上。
<div class="col-md-4">
<div id="wrapper-div" style="box-shadow: 0px 2px 25px rgba(0, 0, 0, .25);">
<div class="thumbnail">
{!! HTML::image('images/sampleImage.png') !!}
</div>
</div>
</div>
回答by Ryan Freemark
You should give the container an id and use that in your custom css file (which should be linked after the bootstrap css):
你应该给容器一个 id 并在你的自定义 css 文件中使用它（它应该在引导 css 之后链接）：
#container {
box-shadow: values
}
#container {
box-shadow: values
}
