Ich bin sicher, dass dies ein einfacher sein könnte, aber ich habe es noch nicht herausgefunden.Bootstrap 3 Fluid Container mit zentriertem Inhalt
Wie erstellt man einen Vollbild-Flüssigkeitsbehälter und lässt den Inhalt, einschließlich der Navigation, zentriert auf der Seite erscheinen, wie in einem nicht-flüssigen Behälter?
Ich versuche nur, den oberen nav/header Hintergrund über die Seite zu strecken, während der Inhalt auf einer festen Breite bleibt.
Sie können die .container mit Ihrem Navigationsinhalt mit einem anderen <div> umgeben, auf dem Sie das Hintergrundstyling hinzufügen. Siehe das folgende Beispiel:
.background {
background-color: #f99;
}
.content {
background-color: #9f9;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="background">
<div class="container">
<div class="row">
<div class="col-xs-12 content">Content</div>
</div>
</div>
</div>Eine grobe Methode ist das Bootstrap Raster-Konzept zu verwenden. Bootstrap unterteilt Ihre Zeile in 12 Spalten. Der Trick besteht in der Einfügung eines 4-schwarzen Raumblocks vor und nach dem 4-Felder-Block. Beispiel:
<div class="container-fluid">
\t <div class="row">
\t \t <div class="col-sm-4"></div>
\t \t <div class="col-sm-4">
\t \t \t <h2>Title</h2>
\t \t \t <p>Your content here</p>
\t \t </div>
\t \t <div class="col-sm-4"></div>
\t </div>
</div>
Vielen Dank für Ihre Antwort, aber was, wenn es ein Bild Hintergrund und ich möchte es im Hintergrund fortgesetzt werden, aber der Rest des Inhalts gleich bleiben? –
Ich fürchte, ich verstehe deine Frage nicht ganz. Ist beispielsweise das Hintergrundbild höher als Ihr Inhalt und wird der untere Teil abgeschnitten? Oder möchten Sie beispielsweise ein Hintergrundbild in voller Höhe? – ckuijjer