92

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

Könnten Sie den Code angeben, mit dem Sie arbeiten? Ohne das kann ich nur sagen, dass Sie sicherstellen müssen, dass für die enthaltenen Tags für das div keine andere Breite als 100% festgelegt ist

— Michael Peterson

Hey Michael, danke für die Antwort. Hier ist der Abschnitt des Codes, mit dem ich arbeite:

<div class="container">            <div class="row">       	<div class="span12"><img src="img/logo.png" width="960px"></center></div>            <div class="block">content</div>

— user1589214

77

Die containerKlasse 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:

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
      <div class="col-lg-8"></div>
      <div class="col-lg-4"></div>
    </div>
    <div class="row">
      <div class="col-lg-12"></div>
    </div>
  </div>
</body>

Bootstrap 2:

<body>
  <div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
  </div>
  <div class="row">
    <div class="span8"></div>
    <div class="span4"></div>
  </div>
  <div class="row">
    <div class="span12"></div>
  </div>
</body>

— Ross Allen
quelle

1

.row benötigt einen .container oder in diesem Fall .containerflüssigkeit.

— NetAction

1

Wenn Sie die ältere Version des Bootstrap-Stylesheets verwenden, container-fluidwird 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; }

— Charlie

29

So können Sie mit Bootstrap 3 das gewünschte Setup erreichen :

<div class="container-fluid">
    <div class="row"> <!-- Give this div your desired background color -->
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    ... your content here ...
                </div>
            </div>
        </div>
    </div>
</div>

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.

— jvannistelrooy
quelle

3

In der Tat sieht es so aus, als ob "keiner der Container verschachtelt werden kann" getbootstrap.com/css/#overview-container . Erwarten Sie hier also ein paar Probleme (aber ich denke, ich werde trotzdem Ihre Lösung verwenden).

— Thibaut Barrère

Es ist jedoch erwähnenswert, dass die Container-Fluid-Klasse nicht in Bootstrap 3.0 verfügbar ist, sondern in Version 3.1 und höher

— Dev

28

SCHNELLE ANTWORT

Verwenden Sie mehrere NOT NESTED .container s
Wickeln Sie die .containers, die einen Hintergrund in voller Breite haben sollen, in eindiv
Fügen Sie dem Wrapping-Div einen CSS-Hintergrund hinzu

Geigen: Einfach: https://jsfiddle.net/vLhc35k4/ , Containergrenzen: https://jsfiddle.net/vLhc35k4/1/
HTML:

<div class="container">
  <h2>Section 1</h2>
</div>
<div class="specialBackground">
  <div class="container">
    <h2>Section 2</h2>
  </div>
</div>

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

divist 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 .containereine feste Breite hat, wird es auch horizontal automatisch zentriert.
Es gibt also keinen Unterschied, ob Sie es als:

Direktes Kind eines Körpers
Direktes Kind eines Grundlegenden div , das ein direktes Kind eines Körpers ist.

Mit "grundlegend" divmeine ich, divdass kein CSS seinen Rand, seine Auffüllung, seine Abmessungen, seine Position oder seine Inhaltsgröße ändert. Wirklich nur ein HTML-Element mit display: 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/

— jave.web
quelle

1

Diese Antwort ist sehr gründlich und unnachgiebig, dass das Verschachteln von Containern in anderen Containern eine "sehr schlechte Idee" ist (wie das Überqueren der Streams in Ghostbusters), und er verweist auf eine Bootstrap-Website-Referenz, die dies bestätigt. Das Einfügen eines Containers in ein einfaches Div ist der Vorschlag und die Tatsache, dass Boostrap diese Technik in ihrem Jumbotron-Beispiel verwendet, zeigt mir, dass jave.web der heutige Gewinner ist!

— Volksman

Dieses Jumbotron-Beispiel entfernte alle meine Fragen.

— Alexander Kim

Manchmal ist es nicht möglich, den Container zu schließen und einen neuen Full-with-Container zu öffnen. Die Problemumgehung. In der folgenden Antwort ist besser!

— RubbelDeCatc

19

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.

.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
}

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:

function full_row_resize(){
    var body_width = $('body').width();
    $('.row-full').css('width', (body_width));
    $('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
    return false;
}

— benedex82
quelle

3

Dies kommt einer idealen Antwort sehr nahe, die keine Änderung des gesamten Seitenlayouts erfordert und manchmal ausreicht, es gibt jedoch subtile Probleme mit Bildlaufleisten. Die .row-full füllt das gesamte Fenster und ignoriert Bildlaufleisten, im Gegensatz zu einer Containerflüssigkeit, die das gesamte Fenster mit oder ohne Bildlaufleisten ausfüllt, je nachdem, ob die Bildlaufleiste undurchsichtig ist.

— Typhlosaurus

Beeindruckend. Die js haben es geschafft, ich habe stundenlang nach einer Lösung gesucht. Mein Problem ist, dass der Inhalt innerhalb eines cm eingegeben wird und daher das äußere HTML nicht ändern kann. Würde wirklich gerne wissen, ob es eine Lösung ohne das js gibt.

— Drooh

17

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/

— Dina
quelle

Die beste Antwort, wenn Sie Bootstrap 4

— Alexander G

6

Wenn Sie das HTML-Layout nicht ändern können:

.full-width {
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
}

<div class="container">
  <div class="row">
    <div class="col-xs-12">a</div>
    <div class="col-xs-12">b</div>
    <div class="col-xs-12 full-width">c</div>
    <div class="col-xs-12">d</div>
  </div>
</div>

Demo: http://www.bootply.com/tVkNyWJxA6

— Seb33300
quelle

2

Anstatt

style="width:100%"

versuchen Sie es mit

class="col-xs-12"

es wird dir 1 Zeichen sparen :)

— Jewgenij Afanasjew
quelle

Diese Antwort ist nicht das, wonach OP gefragt hat. Dadurch wird eine Spalte erstellt, die die volle Breite des äußeren .containerDivs aufweist, jedoch nicht der vollen Breite der Seite im Browser entspricht. Dies ist die Frage.

— Hartley Brody

Ich kann nicht sehen, dass OP die "volle Breite der Seite im Browser" angefordert hat. Wie verstehst du das?

— Jewgenij Afanasjew

1

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/

— Michael Peterson
quelle

1

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!

.full-width {
 margin-top: 15px;
 margin-bottom: 15px;
 position: relative;
 width: calc(100vw - 10px);
 margin-left: calc(-50vw + 5px);
 left: 50%;
}

Hier ist ein Beispiel: https://jsfiddle.net/RubbelDeKatz/wvt9253q

— RubbelDeCatc
quelle

0

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:

<div id="body">

    @RenderSection("featured", required: false)

    <section class="content-wrapper main-content clear-fix">
        <div class="container">
            @RenderBody()
        </div>
    </section>
</div>

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:

@section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
    <div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}

<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
    <div class="container">
        <div class="row">
          MORE CONTENT
        </div>
    </div>
</div>

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.

— Alisson
quelle

0

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.

— Fuddin
quelle

0

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/

$(function() {
    $(window).on('load resize', ppaFullWidth);

    function ppaFullWidth() {
        var $elements = $('[data-ppa-full-width="true"]');
        $.each( $elements, function( key, item ) {
            var $el = $(this);
            var $container = $el.closest('.container');
            var margin = parseInt($container.css('margin-left'), 10);
            var padding = parseInt($container.css('padding-left'), 10)
            var offset = margin + padding;

            $el.css({
                position: "relative",
                left: -offset,
                "box-sizing": "border-box",
                width: $(window).width(),
                "padding-left": offset + "px",
                "padding-right": offset + "px"
            });
        });
    }
});

— Adamj
quelle

0

Ich würde zwei separate 'Container'-Div wie folgt verwenden:

<div class="container">
   /* normal*/
</div>
<div class="container-fluid">
   /*full width container*/
</div>

Beachten Sie, dass die Behälterflüssigkeit nicht Ihren Haltepunkten folgt und ein Behälter voller Breite ist.

— Arash MAS
quelle

Bootstrap-Element 100% Breite

SCHNELLE ANTWORT

WEITERE INFORMATIONEN

VERWENDEN SIE KEINE NESTED CONTAINER

WIE ES FUNKTIONIERT

Bootstrap selbst verwendet den gleichen Ansatz