Bootstrap più jumbotrons

Question

Sto tentando di costruire un sito che - il mio pensiero iniziale richiede 2 jumbotron sovrapposti - utilizzando il bootstrap 3. 1 jumbotron - che si estende al 100% della larghezza - colorazione tradizionale grigia. 1 sovrapposizione - jumbotron aggiuntivo che viene ridotto alla dimensione del 'contenitore' - ma questo avrà uno sfondo di immagine.

1 ° tentativo - con jumbotron sovrapposto - questo consentiva l'imaging reattivo, tuttavia il dimensionamento del jumbotron a tutta larghezza non corrispondeva alla dimensione dell'immagine sovrapposta.

<div class = "jumbotron"> 
<div class ="jumbotron container>//image 
<p>Sample text</p> 
</div> 
</div> 

2 ° modo - con 1 jumbotron - tuttavia questo impedisce quindi la mia immagine di essere reattivo:

<div class="jumbotron"> 
    <div class="row"> 
    <div class="col-md-8"> 
    <div class="jumbpic"> 
    <img src="style/images/car2.png"></div></div> 
    <div class="col-md-4"> 
    <p>Sample text</p> 

Esiste una semplice alternativa per consentire l'intera larghezza jumbotron ma consentono un'immagine centrale che può essere sensibile anche alla dimensione dello schermo?

Answer 1

che sto probabilmente non capire completamente la tua domanda, ma per quanto riguarda avvolgendo il jumbotron in un .well?

Questo ti dà un'immagine reattiva all'interno del jumbotron, e ti dà lo sfondo grigio che racchiude che stai cercando. Aggiungi la classe .img-responsive all'immagine per renderla reattiva e assicurati che sia un'immagine abbastanza grande da riempire lo schermo. Ho aggiunto la classe .center-block per centrare l'immagine.

cura per rimuovere jumbotron imbottitura per OP nei commenti

<style> 
    .jumbotron { 
     padding-top: 0; 
    } 
</style> 

<div class="well"> 
    <div class="jumbotron"> 
     <img src="http://placehold.it/1920x800" class="img-responsive center-block"> 
     <p>Sample text</p> 
    </div> 
</div> 

Fiddle...

---

Edit: Questo vi darà un jumbotron un'immagine di sfondo con. Anche in questo caso, assicurarsi che si sta utilizzando un'immagine di grandi dimensioni ...

<style> 
    .jumbotron { 
     background: url('http://p1.pichost.me/i/59/1828782.jpg'); 
     color: white; 
    } 
</style> 

<div class="well"> 
    <div class="jumbotron"> 
     <div class="container"> 
      <h1>Hello, world!</h1> 
      <p>Sample text</p> 
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> 
     </div> 
    </div> 
</div> 

Fiddle...

Answer 2

Non hai bisogno di due jumbotrons se ti ho preso correttamente. Hai solo bisogno di specificare la tua immagine per essere reattiva.

<div class = "jumbotron"> 
    <div class ="container> 
     <img src="your-image-source" class="img-responsive"> 
    </div> 
</div> 

Leggi sulle immagini responsive qui: http://getbootstrap.com/css/#images