box-shadow sul contenitore bootstrap 3

Sto costruendo un piccolo sito Web utilizzando il bootstrap. La struttura di base è simile al seguente:box-shadow sul contenitore bootstrap 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>

vederlo in azione: http://jsfiddle.net/ZDCjq/

ora voglio l'intero sito per avere una dropshadow sui 4 lati. Il problema è che la griglia di bootstrap utilizza margini negativi e questo fa sì che le righe si sovrappongano all'ombra.

C'è un modo per farlo lasciando intatte tutte le funzionalità di bootstrap?

EDIT: Il risultato atteso è questo: http://i.imgur.com/rPKuDhc.png

EDIT: questo problema era presente solo fino bootstrap 3 RC2. il bootstrap finale 3 rende obsoleta la soluzione alternativa.

fonte

2013-08-15 sloewen

Ciao, ti dispiace postare un'immagine di ciò che si vuole realizzare? Ricorda anche che quando qualcosa non viene fornito con il bootstrap puoi semplicemente scrivere il tuo CSS. – sulfureous

Richiede che l'ombelico abbia la stessa larghezza su tutti e 4 i lati? – edsioufi

@edsioufi: sì questo è esattamente quello di cui ho bisogno. – 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>

fonte

2013-08-15 23:30:37 benny

Ecco come dovrebbe apparire il risultato. Ma il problema è che voglio mantenere tutta la flessibilità che mi dà il bootstrap (mobile-ready). La tua soluzione ignora il bootstrap. – sloewen

Stesso risultato, ma con il solo CSS che hai originariamente http://jsfiddle.net/Y93TX/ – benny

Nel bootstrap devi usare le classi 'row-fluid' e' container-fluid' per mantenere la flessibilità e la funzionalità di esso bene con ciò che viene fornito con Bootstrap. – sulfureous

Aggiungi un div aggiuntivo attorno a tutte div contenitore che si desidera l'ombra per incapsulare. Aggiungi le classi drop-shadow e container al div aggiuntivo. La classe .container manterrà la fluidità. Usa la classe .drop-shadow (o quello che ti piace) per aggiungere la proprietà box-shadow. Quindi scegli come target il div .drop-shadow e annulla gli stili indesiderati. Aggiunge il contenitore, come ad esempio left & right padding.

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

Sarà qualcosa di simile:

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

E il tuo 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>

fonte

2014-01-02 15:47:33 mattsnowkygov

perché c'è un div nested '.container' all'interno di un altro' .container' div? Come è necessario il primo? – ayjay

Si dovrebbe dare al contenitore un id e l'uso che nel CSS personalizzato file (che dovrebbe essere collegato dopo il cst bootstrap):

#container { box-shadow: values }

fonte

2015-07-18 19:24:20

Per coloro che desiderano il box-shadow sul contenitore col-* stesso e non sul .container, è possibile aggiungere un altro div appena dentro l'elemento col-*, e aggiungere l'ombra a quello. Questo elemento non avrà il padding e quindi non interferirà.

La prima immagine ha il box-shadow sull'elemento col-*. A causa della spaziatura 15 px sull'elemento col, l'ombra è spinto all'esterno dell'elemento div anziché sui suoi bordi visivi.

<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 seconda immagine ha un involucro div con il box-shadow su di esso. Questo posizionerà lo box-shadow sui bordi visivi dell'elemento.

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

fonte

2015-07-30 15:43:52 IamFace

C'è un modo per aggiungere un'etichetta in basso al centro dell'immagine? – Abhi

box-shadow sul contenitore bootstrap 3

risposta

Problemi correlati