Я создаю небольшой веб-сайт, используя бутстрап. Базовая структура выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<link href="#" onclick="location.href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css'; return false;" 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/
Теперь я хочу, чтобы весь сайт имел dropshadow на всех 4 сторонах. Проблема в том, что в бутстрап-сетке используются отрицательные поля, и это заставляет строки перекрывать тень.
Есть ли способ выполнить это, оставив всю функциональность бутстрапа неповрежденной?
EDIT: Ожидаемый результат: http://i.imgur.com/rPKuDhc.png
EDIT: эта проблема присутствовала только до загрузки 3 rc2. окончательный бутстрап 3 делает обходной путь ниже устаревшего.