web-dev-qa-db-ja.com

box-shadow on bootstrap 3 container

ブートストラップを使用して小さなWebサイトを構築しています。基本構造は次のようになります。

<!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つの側面すべてに影ができます。問題は、bootstrapグリッドが負のマージンを使用し、これにより行が影に重なることです。

すべてのbootstrap機能をそのままにして、これを達成する方法はありますか？

編集：予想される結果は次のとおりです。 http://i.imgur.com/rPKuDhc.png

編集：この問題はbootstrap 3 rc2までしか存在しませんでした。最後のbootstrap= 3は以下の回避策を廃止します。

htmlcsstwitter-bootstrapgridshadow
21
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を追加します。クラスのドロップシャドウとコンテナを追加の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>
7
mattsnowkygov

col-*コンテナではなく.containerコンテナ自体にボックスシャドウが必要な場合は、col-*要素内に別のdivを追加し、シャドウを追加できます。それに。この要素にはパディングがないため、干渉しません。

最初の画像には、box-shadow要素にcol-*があります。 col要素のパディングは15pxであるため、影はdiv要素の外側にpushedしますそれの視覚的な端よりも。

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>

2番目の画像には、box-shadowが付いたラッパーdivがあります。これにより、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

コンテナにidを指定し、カスタムcssファイルで使用する必要があります（bootstrap cssの後にリンクする必要があります）：

#container { box-shadow: values }

0
Ryan Freemark