box-shadow na bootstrap 3 kontenerze

Buduję małą witrynę przy użyciu bootstrap. Konstrukcja podstawy wygląda następująco:box-shadow na bootstrap 3 kontenerze

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

Zobacz go w akcji: http://jsfiddle.net/ZDCjq/

Teraz chcę cały teren mieć dropshadow na wszystkich 4 stron. Problem polega na tym, że siatka startowa wykorzystuje ujemne marginesy, przez co rzędy nakładają się na cień.

Czy istnieje sposób, aby to osiągnąć, pozostawiając nienaruszoną funkcjonalność bootstrap?

Edycja: Oczekiwany wynik to: http://i.imgur.com/rPKuDhc.png

Edycja: Problem ten był obecny tylko do uruchamiającego 3 RC2. Ostateczny bootstrap 3 powoduje, że obejście tego problemu jest przestarzałe.

Źródło

2013-08-15 sloewen

Cześć, Czy myśli delegowania obraz tego, co chcesz osiągnąć? Pamiętaj też, że jeśli coś nie jest dostarczane z bootstrapem, możesz po prostu napisać własny kod CSS. – sulfureous

Czy cień musi mieć tę samą szerokość na wszystkich 4 stronach? – edsioufi

@edsioufi: tak to jest dokładnie to, czego potrzebuję. – 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>

Źródło

2013-08-15 23:30:37 benny

To właśnie powinien wyglądać wynik. Problem polega jednak na tym, że chcę zachować pełną elastyczność, jaką daje mi bootstrap (gotowy do pracy na urządzeniach mobilnych). Twoje rozwiązanie ignoruje bootstrap. – sloewen

Ten sam wynik, ale z samym CSS, który pierwotnie miałeś http://jsfiddle.net/Y93TX/ – benny

W bootstrapie powinieneś używać klas 'row-fluid' i' container-fluid' aby zachować elastyczność i funkcjonalność dobrze z tym, co jest dostępne w Bootstrap. – sulfureous

Dodaj dodatkowy div wokół wszystkich div kontenera chcesz cień do hermetyzacji. Dodaj klasy drop-shadow i container do dodatkowego div. Klasa .container zachowa płynność. Użyj klasy .drop-shadow (lub cokolwiek chcesz), aby dodać właściwość box-shadow. Następnie wybierz element div .drop-shadow i zaneguj niechciane style .container dodaje - takie jak lewe podbicie z dokładnością &.

Przykład: http://jsfiddle.net/SHLu4/2/

To będzie coś takiego:

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

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

Źródło

2014-01-02 15:47:33 mattsnowkygov

dlaczego istnieje zagnieżdżony div ".container' w innym' .container' div? Jak jest potrzebny pierwszy? – ayjay

Należy dać pojemnik id i użyć jej w niestandardowym css plik (który powinien być połączony po bootstrap css):

#container { box-shadow: values }

Źródło

2015-07-18 19:24:20

Dla chcących box-shadow na samym pojemniku col-* a nie na .container, można dodać kolejny div tylko wewnątrz elementu col-* i dodać cień do tego. Ten element nie będzie miał dopełnienia i dlatego nie będzie się wtrącał.

Pierwsze zdjęcie ma element box-shadow na elemencie col-*. Z powodu wypełnienia 15px na elemencie col, cień jest wciśnięty na zewnątrz elementu div, a nie na jego wizualnych krawędziach.

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

Drugi obraz ma owijkę div z box-shadow na nim. Spowoduje to umieszczenie box-shadow na wizualnych krawędziach elementu.

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

Źródło

2015-07-30 15:43:52 IamFace

Czy istnieje sposób na dodanie etykiety w dolnej środkowej części obrazu? – Abhi

box-shadow na bootstrap 3 kontenerze

Odpowiedz

Powiązane problemy