Bootstrap mit 100% Breite / Volle Breite

Ich möchte eine neue website erstellen mit Bootstrap und ich muss es zu 100% in der Breite, aber ich will es nicht zu flüssig. Zumindest nicht für jetzt.

Das Problem, das ich habe, ist: die Verwendung von bootstrap-standard-Grenzen, die Sie zu 960px und mit einem fluid-layout in voller Breite, sondern verhält sich wie ein fluid-layout sollte durch die beweglichen Elemente werden gestapelt, wenn das Fenster verkleinert in der Größe.

Ist es ein Weg, um 100% der Breite, die statische bootstrap-layout?

  • ändern Sie einfach .container-Größe Sie benötigen?
  • 100% ist immer ein relativer Wert. Ändern Sie die Breite des Containers in Pixel fest.
InformationsquelleAutor Somk | 2013-03-04
  1. 7

    100% Breite ... statische

    Dies ist ein wenig von einem oxymoron. Eine 100% - width layout ist nicht statisch.

    Bootstrap verwendet eine .container - Klasse, um eine vordefinierte Breite. Erhöhen Sie diese auf Ihre gewünschte Breite Seite-wenn Sie möchten, es zu sein größer als es ist Standard. Seien Sie aber vorsichtig, dass die Dimensionierung der Bootstrap-s span* und offset* Klassen müssen die Spaltenbreite entsprechend angepasst.

    • Danke für Eure Hilfe. Ja du hast Recht, es ist ein oxymoron, also ich denke, was ich wirklich fordere, ist, wie kann ich ein dynamisches layout, dass ist nicht stapelbar, das reicht.
    • Können Sie näher auf "stack das reicht"? Bootstrap hat 12 verschiedene span* Größen. .span1 passen 12 mal innerhalb einer Zeile von .container, und span12 passt nur einmal, beziehungsweise. So lange, wie Sie Ihre span* Elemente überschreiten Sie nicht die span-Breite der container sollte man nicht haben, Sie zu stapeln.
    • Ein Beispiel Bootstrap-layout könnte sein: container (row (span12 (row (span6 (row (span3, span3)), span6 (row (span2, span4))))). Beachten Sie, dass die row - Klasse wird verwendet, um zu bestimmen, eine neue Reihe von Elementen, und ohne dass es die Margen übersteigen die Grenze der container.
    InformationsquelleAutor James Donnelly
  2. 18

    Dies ist leicht zu erzielen in Bootstrap 3, ersetzen Sie einfach die .container div mit Ihrem eigenen:

    .my-fluid-container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

    Dank Erik Blumen für die heads-up:
    http://www.helloerik.com/bootstrap-3-grid-introduction#fluid

    UPDATE

    Bootstrap 3 bietet jetzt eine integrierte fluid-container-Klasse verwenden, verwenden Sie einfach <div class="container-fluid">. Siehe docs.

    InformationsquelleAutor JP Lew
  3. 3

    Einfach nicht bootstrap-responsive.css um zu deaktivieren Sie die responsive-Funktion.

    Wenn Sie nicht wollen, eine .container Dachrinne/margin-Sie können Ihre Inhalte außerhalb der container aber im Kopf behalten, müssen Sie pflegen Ihre Inhalte-layout, indem Sie sich(noch verwenden können, grid, verlor aber die Fähigkeit der Zentrierung Ihrer Inhalte) und nicht zu vergessen, die meisten der Bootstrap-Komponente wie .navbar müssen .container zum Steuern der Breite.

    Einer meiner arbeiten, brauchen eine Vollbild-Karussell zu halten alle Inhalte, also ich wickle meine Inhalte mit .container um die Mitte der Inhalt.

    Bootstrap mit 100% Breite /Volle Breite

    • Ja. Völlig fixiert mein Problem. .Zeile>.container - >.Inhalt
    InformationsquelleAutor lngs
  4. 3

    Ich kann nicht ganz herausfinden, wie man Antworten auf die wichtigste Frage, aber hier ist, was Sie wollen OP

    Wie gesagt, nicht verwenden .container, verwenden Sie Ihre eigenen Klasse wie:

    .my-fluid-container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

    Dann, wenn Sie bauen Ihr Netz zu verwenden col-xs-* für die Spalten. Sie haben jetzt eine 100% Breite Seite, die nicht Stapel in die "mobile" Ansicht. Willkommen in den 90ern 😉

    • Dies ist für die Bootstrap 3 - das original in Frage und Antwort scheinen für die bootstrap 2.3
    • Plus Sie hinters Licht geführt eine Antwort, schon gab Sie Kredit! Haha
    InformationsquelleAutor helloerik
  5. 0

    Ich denke, was du meinst, ist, dass Sie nicht wollen, margin/padding an den Seiten. (das ist der einzige Weg, deine Nachricht macht Sinn - eine 100% Breite wird die volle Größe des Bildschirms, so wird es nie statisch sein - die Größe wird sich ändern, je nachdem, wie groß das Fenster ist)

    Haben wir nicht ein use-case oder JSFiddle von Ihnen, so kann ich Ihnen nicht den genauen code, aber Sie müssen sicherstellen, dass Ihr Körper hat, margin:0 und padding:0 und dann schauen Sie für die anderen divs mit Firebug oder Chrome-Web-Dev-tools.

    Wenn Sie möchten, dass Ihr layout zu flüssig, aber halt an einem bestimmten Punkt wächst, dann bewerben Sie sich max-width:1000px (zum Beispiel) auf Ihren Körper oder Ihre Allgemeine container/wrapper-element.

    InformationsquelleAutor George Katsanos
Schreibe einen Kommentar