Bootstrap - Styling elementi jumbotron

Question

Sto provando a creare un semplice sito Web mobile per gli eventi del calendario.

Ecco la versione di base di esso: http://orhancanceylan.com/test/v2/event.html

Il problema qui è; le aree con sfondo viola coprono solo i testi. Ma voglio che si adattino a tutta la larghezza dell'immagine jumbotron come il modello qui sotto.

ho provato ad aggiungere il codice qui sotto:

.jumbotron row, 
.jumbotron .row { 
    color: #efefef; 
    background-color: rgba(157,52,99,0.7); 
    width: 100%; 
} 

Tuttavia è ancora copre solo il contenuto del testo.

Come devo risolvere questo problema?

Grazie,

Answer 1

Quando si utilizza il framework di bootstrap, si dovrà sostituire alcune proprietà di classi standard. Raccomando solo l'uso della griglia per evitare l'override. Se non vuoi ottenere il fix con te puoi usare la classe fluid-container. Ho elaborato un violino per risolvere il tuo problema. Nota che ho sovrascritto il css bootstrapp predefinito, che non consiglio, ma può aiutarti per ora. Spero che aiuti. fluido

Contenitore: bootstrap container fluid

Fiddle: Allora - fix css

Html adattamenti:

<div class="jumbotron"> 
<h1>Pampalarla Alis Veris Qeyff</h1> 
<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="col-xs-4"> 
     <h3><span class="glyphicon glyphicon-time"></span></h3> 
     <h4> Thursday 12:30</h4> 
    </div> 
    <div class="col-xs-4"> 
     <h3><span class="glyphicon glyphicon-map-marker icon-white"></span></h3> 
     <h4> Kanyon</h4> 
    </div> 
    <div class="col-xs-4"> 
     <h3><span class="glyphicon glyphicon-user"></span></h3> 
     <h4>6 People</h4> 
    </div> 
    </div> 
    </div> 
</div> 

Css adattamenti:

.jumbotron{ 
    position: relative; 
    padding:0 !important; 
    margin-top:70px !important; 
    background: #eee; 
    margin-top: 23px; 
    text-align:center; 
    margin-bottom: 0 !important; 
} 
.container-fluid{ 
    padding:0 !important; 
} 
.col-xs-4{ 
    background:rgba(157,52,99,0.7);  
}