ボックスシャドウのブートストラップ3コンテナ

私はブートストラップを使って小さなウェブサイトを構築しています。基本構造は次のようになります。ボックスシャドウのブートストラップ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つの側面にドロップシャドウを持っていると思います。問題は、ブートストラップグリッドが負のマージンを使用しているため、行がシャドウに重なることです。

すべてのブートストラップ機能をそのままにしてこれを達成する方法はありますか？

EDIT：この問題は、ブートストラップ3 RC2まで唯一の存在だった： http://i.imgur.com/rPKuDhc.png

EDIT：期待される結果がこれです。最終的なブートストラップ3は、以下の回避策を廃止しました。

出典

2013-08-15 sloewen

そこにこんにちは、あなたが達成したいもののイメージを掲載する気にしていますか？また、ブートストラップが付属していないときには、自分でCSSを書くこともできます。 – sulfureous

ドロップシャドウを4つの側面すべてで同じ幅にする必要がありますか？ – edsioufi

@edsioufi：はい、まさに私が必要なものです。 – 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>

出典

2013-08-15 23:30:37 benny

結果はどのように見えるはずです。しかし、問題は、ブートストラップが私に与えるすべての柔軟性（モバイル対応）を維持したいということです。あなたのソリューションはブートストラップを無視します。 – sloewen

同じ結果ですが、もともと持っていたCSSだけです。http://jsfiddle.net/Y93TX/ – benny

ブートストラップでは、 'row-fluid'と' container-fluid'クラスを使用して柔軟性と機能性を保つことになっていますブートストラップと一緒に在庫があるもので良い。 – sulfureous

あなたがドロップシャドウをカプセル化したいすべてのコンテナのdivの周りに追加のdivを追加します。追加のdivにクラスのドロップシャドウとコンテナを追加します。クラス。コンテナは流動性を保持します。 box-shadowプロパティを追加するには、クラス.drop-shadow（または好きなもの）を使用します。その後、.drop-shadow divをターゲットにして、左の&のような不要なスタイル.containerの追加を無効にします。

例：http://jsfiddle.net/SHLu4/2/

それはのようなものになるでしょう：あなたは、コンテナにIDを与えると、あなたのカスタム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>

出典

2014-01-02 15:47:33 mattsnowkygov

なぜ '.container' divが他の' .container' divの中に入れ子になっていますか？最初のものはどのように必要ですか？ – ayjay

：

<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ファイル（ブートストラップCSSの後にリンクする必要があります）：

コンテナ自体ではなく.container上のボックスシャドウを望む人のために

出典

2015-07-18 19:24:20

、あなただけcol-*要素内に別のdivを追加し、それに影を追加することができます。この要素はパディングを持たないため、干渉しません。

最初のイメージはcol-*要素にbox-shadowです。 col要素に15ピクセルのパディングがあるため、影はが視覚的なエッジではなく要素の外側にプッシュされます。

<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が配置されます。

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

出典

2015-07-30 15:43:52 IamFace

画像の中央下部にラベルを追加する方法はありますか？ – Abhi

ボックスシャドウのブートストラップ3コンテナ

答えて

関連する問題