box-shadow on bootstrap 3 container
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.
Answer
@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>