slo*_*wen 23 html css grid shadow twitter-bootstrap
我正在使用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使得下面的解决方法已经过时了.
ben*_*nny 21
@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>
在您希望封装阴影的所有容器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>
| 归档时间： |
|
| 查看次数： |
136960 次 |
| 最近记录： |