题 bootstrap 3容器上的box-shadow


我正在使用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使得下面的解决方法已经过时了。


19
2017-08-15 22:30


起源


你好,你介意发布你想要完成的图像吗?还要记住,当某些东西没有引导程序时,你真的可以编写自己的CSS。 - sulfureous
您是否要求所有4个侧面的阴影宽度相同? - edsioufi
@edsioufi:是的,这正是我需要的。 - sloewen
你需要阴影模糊吗?或者一个坚实的阴影会好吗? - edsioufi
@edsioufi:我需要它模糊。 (我认为可以在行-div上使用边框来完成一个实体) - sloewen


答案:


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>

20
2017-08-15 23:30



这就是结果应该是什么样子。但问题是我想保持引导程序给我的所有灵活性(移动就绪)。您的解决方案忽略了引导程序。 - sloewen
同样的结果,但只有你原来的CSS jsfiddle.net/Y93TX - benny
在引导程序中你应该使用 row-fluid 和 container-fluid 使用Bootstrap提供的功能可以保持它的灵活性和功能性。 - sulfureous
@BenMun:但是当我添加bootstrap时它会中断: jsfiddle.net/Y93TX/1 - sloewen
@sulfureous:在bootstrap 3中,不再有行流体或容器流体类。一切都是流动的默认 - sloewen


在您希望封装阴影的所有容器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>

6
2018-01-02 15:47



为什么有嵌套 .container div在另一个里面 .container DIV?第一个如何必要? - ayjay


对于那些想要盒子阴影的人来说 col-* 容器本身而不是 .container,你可以添加另一个 div 就在里面 col-* 元素,并添加阴影。该元素不具有填充,因此不会干扰。

第一张图片有 box-shadow 在...上 col-* 元件。由于15px填充 col 元素,影子是  到了外面 div 元素而不是它的视觉边缘。

box-shadow on col-* element

<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 在元素的可视边缘。

box-shadow on wrapper div

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

4
2017-07-30 15:43



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


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

#container { box-shadow: values }


0
2017-07-18 19:24