it-swarm.com.ru

box-shadow на контейнере для начальной загрузки 3

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

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

Правка: Эта проблема присутствовала только до тех пор, пока загрузчик 3 rc2 . Последний загрузчик 3 не сделает обходной путь устаревшим.

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

Добавьте дополнительный div вокруг всех div-контейнеров, которые вы хотите инкапсулировать. Добавьте классы drop-shadow и container в дополнительный div. Класс .container сохранит текучесть. Используйте класс .drop-shadow (или как вам нравится), чтобы добавить свойство box-shadow. Затем выберите целевой объект .drop-shadow и отмените нежелательные стили, которые добавляет .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>
7
mattsnowkygov

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

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

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

#container { box-shadow: values }

0
Ryan Freemark