Bootstrap mehrere Jumbotrons

Question

Ich versuche eine Website zu erstellen, die - mein erster Gedanke - 2 überlappende Jumbotron benötigt - Bootstrap 3 verwenden. 1 Jumbotron - Dehnung 100% der Breite - traditionelle graue Färbung. 1 überlappend - zusätzlicher Jumbotron, der auf die "Container" -Größe reduziert wird - aber dies wird einen Bildhintergrund haben.

Erster Versuch - mit überlappendem Jumbotron - dies ermöglichte eine reaktionsfähige Bildgebung, jedoch stimmte die Größe des Jumbotrons mit voller Breite nicht mit der Größe des überlappenden Bildes überein.

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

2. Art und Weise - mit 1 jumbotron - aber dies verhindert dann mein Bild anspricht:

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

Gibt es eine einfache Alternative, um die volle Breite jumbotron zu ermöglichen, aber ein zentrales Bild zu ermöglichen, die reagieren können auf Bildschirmgröße auch?

Answer 1

ich Ihre Frage wahrscheinlich nicht vollständig zu verstehen, aber was ist in einem .well die jumbotron Verpackung?

Damit erhalten Sie ein reaktionsfähiges Bild im Jumbotron und erhalten den grauen umschließenden Hintergrund, nach dem Sie suchen. Fügen Sie Ihrem Bild einfach die .img-responsive Klasse hinzu, um es ansprechbar zu machen und stellen Sie sicher, dass das Bild groß genug ist, um den Bildschirm zu füllen. Ich habe die Klasse .center-block hinzugefügt, um das Bild zu zentrieren. Dies gibt Ihnen eine jumbotron mit einem Hintergrundbild:

Edited jumbotron padding pro OP in den Kommentaren

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

---

bearbeiten zu entfernen. Wieder stellen Sie sicher, dass Sie ein großes Bild verwenden ...

<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

Sie brauchen nicht zwei Jumbotrons, wenn ich Sie richtig verstanden habe. Sie müssen nur Ihr Bild als reaktionsschnell angeben.

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

Lesen Sie mehr über ansprechende Bilder hier: http://getbootstrap.com/css/#images