Ich möchte abwechselnd 100% farbige Blöcke erstellen. Eine "ideale" Situation wird als Anhang dargestellt, ebenso wie die aktuelle Situation.
Gewünschtes Setup:
Zur Zeit:
Meine erste Idee war, eine div-Klasse zu erstellen, ihr eine Hintergrundfarbe zu geben und sie 100% breit zu machen.
.block {
width: 100%;
background: #fff;
}
Sie können jedoch sehen, dass dies offensichtlich nicht funktioniert. Es ist auf einen Containerbereich beschränkt. Ich habe versucht, den Container zu schließen, und das hat auch nicht funktioniert.
css
twitter-bootstrap
width
user1589214
quelle
quelle
<div class="container"> <div class="row"> <div class="span12"><img src="img/logo.png" width="960px"></center></div> <div class="block">content</div>
Antworten:
Die
container
Klasse ist absichtlich nicht 100% breit. Abhängig von der Breite des Ansichtsfensters gibt es unterschiedliche feste Breiten.Wenn Sie mit der gesamten Bildschirmbreite arbeiten möchten, verwenden Sie
.container-fluid
:Bootstrap 3:
Bootstrap 2:
quelle
container-fluid
wird eine horizontale Bildlaufleiste angezeigt . Um dies zu beheben, fügen Sie dies Ihrem Stylesheet hinzu.container-fluid{ padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
So können Sie mit Bootstrap 3 das gewünschte Setup erreichen :
Das
container-fluid
Teil stellt sicher, dass Sie den Hintergrund über die gesamte Breite ändern können. Dascontainer
Teil stellt sicher, dass Ihr Inhalt immer noch in einer festen Breite verpackt ist.Dieser Ansatz funktioniert, aber ich persönlich mag nicht alle Verschachtelungen. Bisher habe ich jedoch keine bessere Lösung gefunden.
quelle
SCHNELLE ANTWORT
.container
s.container
s, die einen Hintergrund in voller Breite haben sollen, in eindiv
Geigen: Einfach: https://jsfiddle.net/vLhc35k4/ , Containergrenzen: https://jsfiddle.net/vLhc35k4/1/
HTML:
CSS:
.specialBackground{ background-color: gold; /*replace with own background settings*/ }
WEITERE INFORMATIONEN
VERWENDEN SIE KEINE NESTED CONTAINER
Viele Leute werden ( fälschlicherweise ) vorschlagen, dass Sie verschachtelte Container verwenden sollten.
Nun, du solltest NICHT .
Sie dürfen nicht verschachtelt werden. (Siehe " Container " Abschnitt " in den Dokumenten)
WIE ES FUNKTIONIERT
div
ist ein Blockelement, das sich standardmäßig auf die gesamte Breite eines Dokumentkörpers erstreckt - es gibt die Funktion in voller Breite. Es hat auch eine Höhe des Inhalts (wenn Sie nichts anderes angeben).Die Bootstrap-Container müssen keine direkten Kinder eines Körpers sein, sondern sind nur Container mit einer gewissen Polsterung und möglicherweise einer festen Breite mit variabler Bildschirmbreite.
Wenn ein Grundraster
.container
eine feste Breite hat, wird es auch horizontal automatisch zentriert.Es gibt also keinen Unterschied, ob Sie es als:
div
, das ein direktes Kind eines Körpers ist.Mit "grundlegend"
div
meine ich,div
dass kein CSS seinen Rand, seine Auffüllung, seine Abmessungen, seine Position oder seine Inhaltsgröße ändert. Wirklich nur ein HTML-Element mitdisplay: block;
CSS und möglicherweise Hintergrund.Aber natürlich sollte das Festlegen von vertikalem CSS (Höhe, Polsterung, ...) das Bootstrap-Raster nicht beschädigen :-)
Bootstrap selbst verwendet den gleichen Ansatz
... Überall auf der eigenen Website und im Beispiel "JUMBOTRON":
http://getbootstrap.com/examples/jumbotron/
quelle
Es gibt eine Problemumgehung mit vw. Ist nützlich, wenn Sie keinen neuen Flüssigkeitsbehälter erstellen können. Dies wird in einem klassischen 'Container'-Div in voller Größe sein.
Danach gibt es das Seitenleistenproblem (dank @Typhlosaurus), das mit dieser js-Funktion gelöst wurde und beim Laden und Ändern der Größe des Dokuments aufgerufen wird:
quelle
In Bootstrap 4 können Sie die Klasse 'w-100' verwenden (w als Breite und 100 als 100%).
Dokumentation finden Sie hier: https://getbootstrap.com/docs/4.0/utilities/sizing/
quelle
Wenn Sie das HTML-Layout nicht ändern können:
Demo: http://www.bootply.com/tVkNyWJxA6
quelle
Anstatt
versuchen Sie es mit
es wird dir 1 Zeichen sparen :)
quelle
.container
Divs aufweist, jedoch nicht der vollen Breite der Seite im Browser entspricht. Dies ist die Frage.Entschuldigung, hätte auch nach Ihrem CSS fragen sollen. Im Grunde genommen müssen Sie Ihrem Container-Div den Stil
.container { width: 100%; }
in Ihrem CSS geben, und dann erben die eingeschlossenen Divs dies, solange Sie ihnen nicht ihre eigene Breite geben. Sie haben auch ein paar schließende Tags vermisst, und das</center>
schließt ein,<center>
ohne dass es jemals geöffnet wird, zumindest in diesem Codeabschnitt. Ich war mir nicht sicher, ob Sie das Bild in demselben Div haben wollten, das Ihren Inhalt enthält, oder getrennt, also habe ich zwei Beispiele erstellt. Ich habe die Breite des Bilds auf 100px geändert, einfach weil jsfiddle einen kleinen Anzeigebereich bietet. Lassen Sie mich wissen, wenn es nicht das ist, wonach Sie suchen.Inhalt und Bild getrennt: http://jsfiddle.net/QvqKS/2/
Inhalt und Bild im selben Div (Bild schwebte links): http://jsfiddle.net/QvqKS/3/
quelle
Manchmal ist es nicht möglich, den Inhaltscontainer zu schließen. Die Lösung, die wir verwenden, ist etwas anders, verhindert jedoch einen Überlauf aufgrund der Größe der Firefox-Bildlaufleiste!
Hier ist ein Beispiel: https://jsfiddle.net/RubbelDeKatz/wvt9253q
quelle
Ich würde mich fragen, warum jemand versuchen würde, die Containerbreite zu "überschreiben", da der Zweck darin besteht , den Inhalt mit etwas Polsterung beizubehalten, aber ich hatte eine ähnliche Situation (deshalb wollte ich meine Lösung teilen, obwohl es Antworten gibt ).
In meiner Situation wollte ich, dass der gesamte Inhalt (aller Seiten) in einem Container gerendert wird. Dies war also der Code aus meiner _Layout.cshtml:
Auf meiner Home-Index-Seite hatte ich ein Hintergrund-Header-Bild , das die gesamte Bildschirmbreite ausfüllen soll. Die Lösung bestand also darin, die Index.cshtml folgendermaßen zu gestalten:
Ich denke, dies ist besser als der Versuch, Problemumgehungen vorzunehmen, da Abschnitte mit dem Ziel erstellt werden, Ansichten zu erlauben (oder zu erzwingen), einige Inhalte im Layout dynamisch zu ersetzen.
quelle
Obwohl die Leute erwähnt haben, dass Sie in diesem Fall .container-fluid verwenden müssen, müssen Sie auch die Polsterung vom Bootstrap entfernen.
quelle
Die folgende Antwort ist in keiner Weise genau optimal, aber ich brauchte etwas, das seine Position innerhalb des Containers beibehält, während es den inneren Teil vollständig ausdehnt.
https://jsfiddle.net/fah5axm5/
quelle
Ich würde zwei separate 'Container'-Div wie folgt verwenden:
Beachten Sie, dass die Behälterflüssigkeit nicht Ihren Haltepunkten folgt und ein Behälter voller Breite ist.
quelle