Box-shadow на загрузочном контейнере 3 контейнера

Я создаю небольшой веб-сайт, используя бутстрап. Базовая структура выглядит следующим образом:

<!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 делает обходной путь ниже устаревшего.

Ответы

Ответ 1

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>

Ответ 2

Добавьте дополнительный div вокруг всех контейнеров, которые вы хотите, чтобы капля тени была инкапсулирована. Добавьте классы drop-shadow и контейнер в дополнительный div. Класс. Контейнер будет поддерживать текучесть. Используйте свойство .drop-shadow (или все, что вам нравится), чтобы добавить свойство box-shadow. Затем настройте div.drop-shadow и отрицайте ненужные стили. Добавляет контейнер. Например, левое и правое заполнение.

Пример: 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>

Ответ 3

Для тех, кто хочет использовать тень в контейнере col-*, а не в .container, вы можете добавить еще один div только внутри элемента col-* и добавить к нему тень. Этот элемент не будет иметь отступы, и поэтому не мешает.

Первое изображение имеет box-shadow в элементе col-*. Из-за обивки 15px в элементе col тень вытесняется извне элемента 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>

Ответ 4

Вы должны предоставить контейнеру идентификатор и использовать его в своем пользовательском файле css (который должен быть связан после начальной загрузки css):

#container { box-shadow: values }