web-dev-qa-db-de.com

box-Shadow auf Bootstrap 3-Container

Ich baue eine kleine Website mit Bootstrap. Die Grundstruktur sieht folgendermaßen aus:

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

Sehen Sie es in Aktion: http://jsfiddle.net/ZDCjq/

Jetzt möchte ich, dass die gesamte Site auf allen 4 Seiten einen Dropshadow hat. Das Problem ist, dass das Bootstrap-Grid negative Ränder verwendet, wodurch die Zeilen den Schatten überlappen.

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

BEARBEITEN: Das erwartete Ergebnis lautet: http://i.imgur.com/rPKuDhc.png

BEARBEITEN: Dieses Problem war nur vorhanden, bis Bootstrap 3 rc2 . Der letzte Bootstrap 3 die folgende Problemumgehung macht.

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

Fügen Sie ein zusätzliches Div um alle Container-Divs hinzu, die der Schatten einkapseln soll. Fügen Sie die Klassen drop-shadow und container dem zusätzlichen div hinzu. Der Klassencontainer behält die Fließfähigkeit bei. Verwenden Sie die Klasse .drop-shadow (oder was auch immer Sie möchten), um die box-shadow-Eigenschaft hinzuzufügen. Richten Sie dann das .drop-shadow-div ein und negieren Sie die unerwünschten Stile, die der .container hinzufügt - z. B. links und rechts.

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

Es wird ungefähr so ​​sein:

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

Für diejenigen, die den Box-Shadow für den col-*-Container selbst und nicht für den .container möchten, können Sie eine weitere div direkt im col-*-Element hinzufügen und den Schatten hinzufügen. Dieses Element wird nicht aufgefüllt und stört daher nicht.

Das erste Bild enthält den box-shadow im col-*-Element. Aufgrund der 15px-Auffüllung des col-Elements befindet sich der Schatten gedrückt außerhalb des div-Elements und nicht an den Sichtkanten.

 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>

Das zweite Bild hat einen Wrapper div mit dem box-shadow darauf. Dadurch wird der box-shadow an den Sichtkanten des Elements platziert.

 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

Sie sollten dem Container eine ID geben und diese in Ihrer benutzerdefinierten CSS-Datei verwenden (die nach der Bootstrap-CSS verknüpft werden sollte):

#container { box-shadow: values }

0
Ryan Freemark