html - bootstrap 3 容器上的 box-shadow

Question

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

<!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/rPCuDhc.png

编辑：这个问题只存在于 bootstrap 3 rc2。最终的引导程序 3 使下面的解决方法已过时。

score 24 · Accepted Answer

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>

score 8 · Accepted Answer

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

示例：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>

score 4 · Accepted Answer

对于那些想要在col-*容器本身而不是在容器上的 box-shadow，您可以在元素内.container添加另一个，然后添加阴影。这个元素不会有填充，因此不会干扰。divcol-*

第一个图像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>

score 0 · Accepted Answer

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

#container { box-shadow: values }

html - bootstrap 3 容器上的 box-shadow

4 回答 4

Related

Reference