web-dev-qa-db-fra.com

boîte-ombre sur le conteneur bootstrap 3

Je construis un petit site web en utilisant bootstrap. La structure de base ressemble à ceci:

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

Voyez-le en action: http://jsfiddle.net/ZDCjq/

Maintenant, je veux que tout le site ait une ombre portée des 4 côtés. Le problème est que la grille d’amorçage utilise des marges négatives et que les lignes se superposent à l’ombre.

Y a-t-il un moyen d'accomplir cela en laissant toutes les fonctionnalités de bootstrap intactes?

EDIT: Le résultat attendu est le suivant: http://i.imgur.com/rPKuDhc.png

EDIT: Ce problème n’était présent que jusqu’à bootstrap 3 rc2 . Le bootstrap final 3 rend la solution de contournement ci-dessous obsolète.

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

Ajoutez une div supplémentaire autour de toutes les div de conteneur que vous souhaitez que l'ombre portée encapsule. Ajoutez les classes drop-shadow et container à la div supplémentaire. La classe .container gardera la fluidité. Utilisez la classe .drop-shadow (ou ce que vous préférez) pour ajouter la propriété box-shadow. Puis ciblez le div .drop-shadow et annulez les styles indésirables ajoutés par .container - tels que le remplissage gauche et droit.

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

Ça va être quelque chose comme:

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

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

Pour ceux qui veulent l'ombre de la boîte sur le conteneur col-* et non sur le .container, vous pouvez ajouter une autre div juste à l'intérieur de l'élément col-* et y ajouter l'ombre. Cet élément n'aura pas le rembourrage et n'interférera donc pas.

La première image a le box-shadow sur l'élément col-*. En raison du remplissage de 15 pixels sur l'élément col, l'ombre est poussée vers l'extérieur de l'élément div plutôt que sur ses bords visuels.

 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>

La seconde image a un wrapper div avec le box-shadow dessus. Cela placera le box-shadow sur les bords visuels de l'élément.

 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

Vous devez donner un identifiant au conteneur et l'utiliser dans votre fichier CSS personnalisé (qui doit être lié après le css bootstrap)

#container { box-shadow: values }

0
Ryan Freemark