Bootstrap 3容器上的盒阴影

Question

Bootstrap 3容器上的盒阴影

25

我正在使用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/

现在我希望整个网站的四周都有一道投影。问题是，Bootstrap网格使用了负边距，这会导致行与阴影重叠。

是否有办法在保留所有Bootstrap功能的同时完成这个效果？

编辑：期望得到的结果是： http://i.imgur.com/rPKuDhc.png

编辑：这个问题只存在于 Bootstrap 3 rc2 之前版本，最新版的 Bootstrap 3 已经解决了这个问题。

- beesteak

你好，您介意发布一张您想要实现的图片吗？同时请记住，当Bootstrap没有提供某些功能时，您可以编写自己的CSS来实现。 - sulfureous

您需要四边的投影宽度相同吗？ - edsioufi

你需要阴影有模糊效果吗？还是实心阴影就可以了？ - edsioufi

@edsioufi：我需要它变模糊。（我认为可以在行div上加边框来实现实心效果） - beesteak

@sulfureous：我发布了一张图片。我知道我可以编写自己的CSS，但是我不知道如何修改/覆盖Bootstrap以完成此操作，而不会弄乱整个网格系统。 - beesteak

显示剩余2条评论

4个回答

8

在想要加入阴影效果的所有容器div周围添加一个额外的div。将类drop-shadow和container添加到额外的div中。class .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>

- mattsnowkygov

4

为什么一个.container div嵌套在另一个.container div中？第一个容器是如何必要的？ - ayjay

4

对于那些希望在col-*容器本身上使用box-shadow而不是在.container上使用的人，您可以在col-*元素内部添加另一个div，并将阴影添加到该元素。这个元素将没有填充，因此不会干扰。

第一张图片在col-*元素上有box-shadow。由于col元素上有15像素的填充，阴影被推到了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>

- iamface

有没有办法在图像底部中心添加标签？ - Abhi

0

你应该为容器分配一个ID，并在自定义CSS文件中使用它（该文件应在Bootstrap CSS文件之后链接）：

`#container{box-shadow: values}`

- Ryan Freemark

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

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