box-shadow on bootstrap 3 container
Question
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/
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.
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
EDIT: this problem was only present until bootstrap 3 rc2. the final bootstrap 3 makes the workaround below obsolete.
4 answers
solution1
20 ACCPTED 2013-08-15 23:30:37
@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>
solution2
7 2014-01-02 15:47:33
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.
Example: 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:
<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>
solution3
4 2015-07-30 15:43:52
For those wanting the box-shadow on the col-* container itself and not on the .container , you can add another div just inside the col-* element, and add the shadow to that. This element will not have the padding, and therefor not interfere.
The first image has the box-shadow on the col-* element. Because of the 15px padding on the col element, the shadow is pushed to the outside of the div element rather than on the visual edges of it.
<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 div with the box-shadow on it. This will place the box-shadow on the visual edges of the element.
<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>
solution4
0 2015-07-18 19:24:20
你应该给容器一个id并在你的自定义css文件中使用它（应该在bootstrap css之后链接）：
#container { box-shadow: values }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.