Question

我正在使用bootstrap构建一个小网站。基本结构如下所示：

<!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>

查看实际操作：http://jsfiddle.net/ZDCjq/

现在我希望整个网站在所有4个方面都有一个阴影。问题是，引导网格使用负边距，这使得行与阴影重叠。

有没有办法在保持所有引导功能完好的情况下完成此任务？

编辑：预期的结果是这样的： http://i.imgur.com/rPKuDhc.png

编辑：这个问题只存在于bootstrap 3 rc2之前。最终的bootstrap 3使得下面的解决方法已经过时了。

Answer 1

http://jsfiddle.net/Y93TX/2/

     @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>

Answer 2

在您希望封装阴影的所有容器div周围添加一个额外的div。将类drop-shadow和容器添加到附加div。类.container将保持流动性。使用类.drop-shadow（或任何你喜欢的）来添加box-shadow属性。然后定位.drop-shadow div并取消不需要的样式.container添加 - 例如left＆amp;正确填充。

示例：http://jsfiddle.net/SHLu4/2/

这将是：

<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>

你的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>

Answer 3

对于想要col-*容器本身而不是.container上的方框阴影的用户，可以在div元素内添加另一个col-*，然后添加阴影到那。这个元素没有填充，因此不会干扰。

第一张图片在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>

第二张图片上有一个包含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>

Answer 4

你应该给容器一个id并在你的自定义css文件中使用它（应该在bootstrap css之后链接）：

#container { box-shadow: values }

bootstrap 3容器上的box-shadow

4 个答案: