Box-Shadow auf Bootstrap 3 Container

Ich baue eine kleine Website mit Bootstrap. Die Grundstruktur sieht wie folgt aus:Box-Shadow auf Bootstrap 3 Container

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

es Siehe in Aktion: http://jsfiddle.net/ZDCjq/

Jetzt habe ich die ganze Seite ein Schlagschatten auf allen 4 Seiten haben wollen. Das Problem besteht darin, dass das Bootstrap-Gitter negative Ränder verwendet und dadurch die Zeilen den Schatten überlappen.

Gibt es eine Möglichkeit, dies zu erreichen, während alle Bootstrap-Funktionen intakt bleiben?

EDIT: Das erwartete Ergebnis ist folgendes: http://i.imgur.com/rPKuDhc.png

EDIT: dieses Problem bis Bootstrap 3 RC2 nur vorhanden war. Der finale Bootstrap 3 macht die Problemumgehung unten überflüssig.

Quelle

2013-08-15 sloewen

dort Hallo, Sie veröffentlichen es Ihnen etwas ausmachen, ein Bild von dem, was Sie erreichen wollen? Denken Sie auch daran, dass wenn etwas nicht mit Bootstrap kommt, Sie einfach Ihr eigenes CSS schreiben können. – sulfureous

Soll der Schlagschatten an allen 4 Seiten gleich breit sein? – edsioufi

@edsioufi: ja das ist genau das, was ich brauche. – 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>

Quelle

2013-08-15 23:30:37 benny

So sollte das Ergebnis aussehen. Aber das Problem ist, dass ich die Flexibilität beibehalten will, die Bootstrap mir gibt (mobil-bereit). Ihre Lösung ignoriert den Bootstrap. – sloewen

Gleiches Ergebnis, aber mit nur dem CSS, das Sie ursprünglich hatten http://jsfiddle.net/Y93TX/ – benny

Im Bootstrap sollten Sie 'row-fluid' und' container-fluid' Klassen verwenden, um die Flexibilität und Funktionalität zu behalten Gut, was mit Bootstrap vorrätig ist. – sulfureous

eine zusätzliche div um alle Container Divs Fügen Sie der Schlagschatten kapseln wollen. Fügen Sie den Klassen-Drop-Shadow und -Container dem zusätzlichen Div hinzu. Die Klasse .container wird die Flüssigkeit behalten. Verwenden Sie die Klasse .drop-shadow (oder was immer Sie möchten), um die box-shadow-Eigenschaft hinzuzufügen. Dann zielen Sie auf das .drop-shadow-div und negieren Sie die unerwünschten Stile .container fügt hinzu - wie links & rechts padding.

Beispiel: http://jsfiddle.net/SHLu4/2/

es etwas sein werden wie:

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

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

Quelle

2014-01-02 15:47:33 mattsnowkygov

Warum gibt es ein verschachteltes '.container' div in einem anderen' .container' div? Wie ist der erste notwendig? – ayjay

Sie sollten die Behälter eine ID geben und dass in Ihrem benutzerdefinierten CSS Datei (die nach dem Bootstrap css verknüpft werden soll):

#container { box-shadow: values }

Quelle

2015-07-18 19:24:20

Für diejenigen, die Box-Schatten auf dem col-* Behälter wollen selbst und nicht auf dem .container, können Sie eine andere div gerade innerhalb des col-* Element hinzufügen und den Schatten, dass hinzuzufügen. Dieses Element hat keine Polsterung und interferiert daher nicht.

Das erste Bild hat die box-shadowcol-* auf dem Element. Wegen des 15px padding auf das col Element, ist der Schatten an die Außenseite des div Elements geschoben, anstatt auf den visuellen Kanten davon.

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

Das zweite Bild hat eine Hülle mit dem divbox-shadow darauf. Dies wird die box-shadow auf die visuellen Kanten des Elements platzieren.

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

Quelle

2015-07-30 15:43:52 IamFace

Gibt es eine Möglichkeit, ein Label in der unteren Mitte des Bildes hinzuzufügen? – Abhi

Box-Shadow auf Bootstrap 3 Container

Antwort

Verwandte Themen