Festlegen der maximalen Breite für den Körper mithilfe von Bootstrap

75

Ich baue meine erste Seite mit Twitter Bootstrap und experimentiere mit flüssigen Layouts. Ich habe meinen Container so eingestellt, dass er flüssig ist. Jetzt nimmt der Inhalt die gesamte Seitenbreite ein und passt sich an, wenn ich die Größe des Browsers ändere.

Das Design, an dem ich arbeite, wurde für eine maximale Breite von ~ 950px erstellt.

Ich habe variables.lessund responsive.lessund die Bootstrap-Dokumentation überprüft . Ich kann nicht genau herausfinden, wie ich das erreichen kann.

Ich habe auch versucht, Folgendes zu meinem hinzuzufügen style.css:

body {
    max-width: 950px;
}

html twitter-bootstrap css

— Olly F.
quelle

Ihre CSS-Regel funktioniert, was ist daran falsch? Demo

— Andres Ilich

OK. Wiederholt. Es hat jedoch früher nicht funktioniert, was möglicherweise auf einige Probleme mit LESS / Espresso / Codekit zurückzuführen ist. Meine WENIGER Dateien wurden nicht korrekt kompiliert. Jetzt, da es funktioniert, wird es bodywie zuvor nach links anstatt nach Mitte ausgerichtet. Irgendwelche Vorschläge? Ich habe versucht margin, autolinks und rechts einzustellen.

— Olly F

2

@OllyF Warten Sie, Sie möchten, dass Ihr "Container" 950 Pixel breit ist und nicht das gesamte Dokument? Ich bin verwirrt, Twitters nicht flüssiger Behälter hat standardmäßig eine Breite von 940px, daher liegt er unter Ihrer Einschränkung.

— Andres Ilich

Mein Verständnis ist, dass es besser ist, wenn das bodyeine hat max-width, nur für den Fall, dass ich etwas außerhalb des Containers tun möchte. Abgesehen davon habe ich es mit einem Flüssigkeitsbehälter zu tun. Wenn ich meinen Behälter auf Flüssigkeit stelle, dehnt er sich auf die gesamte Körperbreite aus. Deshalb versuche ich, eine maximale Breite für den Körper festzulegen.

— Olly F

1

@OllyF Ändern Sie diese Medienabfrage innerhalb des reaktionsfähigen CSS auf die gewünschte Breite: @media (min-width: 768px) and (max-width: 979px) { .. }In Ihrem Fall max-width:950px;.

— Andres Ilich

26

Bearbeiten

Ein besserer Weg, dies zu tun, ist:

Erstellen Sie Ihre eigene weniger-Datei als weniger wichtige Hauptdatei (wie bootstrap.less).
Importieren Sie alle benötigten Bootstrap-Dateien. (In diesem Fall müssen Sie nur alle reaktionsfreudigeren Dateien importieren, aber responsive-1200px-min.less)
Wenn Sie etwas in der ursprünglichen Bootstrap-weniger-Datei ändern müssen, müssen Sie nur Ihre eigenen weniger schreiben, um den weniger-Bootstrap-Code zu überschreiben. (Denken Sie daran, Ihren weniger Code / Datei weniger nach zu setzen @import { /* bootstrap's less file */ };).

Original

Ich habe das gleiche Problem. So habe ich es behoben.

Suchen Sie die Medienabfrage:

@media (max-width:1200px) ...

Entfernen Sie es. (Ich meine das Ganze, nicht nur @media (max-width:1200px))

Da die Standardbreite von Bootstrap 940px beträgt, müssen Sie nichts tun.

Wenn Sie eine eigene haben möchten max-width, ändern Sie einfach die CSS-Regel in der Medienabfrage, die Ihrer gewünschten Breite entspricht.

— Maxisam
quelle

6

Haben Sie eine Idee, wie Sie dies ändern können, ohne Bootstrap-Dateien zu ändern? Gibt es beispielsweise eine Möglichkeit, dieses Verhalten in CSS nach dem Einfügen von Bootstrap zu ändern?

— Mdrozdziel

Sie können Ihre eigene Hauptdatei ohne weniger haben, die alle Ihre benutzerdefinierten weniger Dateien und die weniger Dateien des Bootstraps enthält. Ihre benutzerdefinierte Datei mit weniger kann alle Regeln in den weniger Dateien von Bootstrap überschreiben.

— Maxisam

Besser noch, überschreiben Sie einfach die entsprechenden Variablen anstelle der tatsächlichen Stile (siehe bootstrap / variables.less).

— ebuat3989

175

Sie müssen Bootstrap-responsive nicht ändern, indem Sie @media (max-width:1200px)...

Meine Anwendung hat eine max-widthvon 1600px. So hat es bei mir funktioniert:

Bootstrap-custom.css erstellen - Ich möchte mein ursprüngliches Bootstrap-CSS so weit wie möglich nicht überschreiben.
Überschreiben Sie in bootstrap-custom.css die Containerflüssigkeit, indem Sie den folgenden Code einfügen:

So was:

/* set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px; /* or 950px */
}

— jcg
quelle

11

Ich habe .container-fluid in .container geändert (ich verwende diese Klasse anstelle Ihrer) und die maximale Breite in die minimale Breite geändert, und es hat funktioniert! :)

— gabrielhpugliese

7

Das funktioniert nicht, wenn Sie Bootstrap-Elemente wie die Navigationsleiste verwenden, deren Breite noch unter @media (max-width: 1200px) definiert ist

— Digout

8

Das funktioniert einwandfrei! Es emuliert das Facebook-Layout, insbesondere für die Navigationsleiste. Ich denke, das sollte die akzeptierte Antwort sein.

— David Morales

2

Minimaler Aufwand und maximale Wirkung.

— Matt Lacey

2

Einstellspielraum: Auto ist nicht mehr erforderlich (mit Bootstrap 3 nicht mehr).

— Dr. Jan-Philip Gehrcke

8

In responsive.less können Sie die Zeile auskommentieren, die responsive-1200px-min.less importiert.

// Large desktops

@import "responsive-1200px-min.less";

Wie so:

// Large desktops

// @import "responsive-1200px-min.less";

— Henry
quelle

Ja, aber wenn er diese weniger Datei importiert hat und alle CSS-Dateien in der Anwendung hat, kann er das erste Div wie folgt in das Body-Tag einfügen: <div class = "container-fluid"> und <div class = "row -fluid "> und der gesamte Behälter ist flüssig. Ich denke, das ist sein Plan. Ich empfehle auch zu lesen: Gerüst Ein ziemlich gutes Beispiel finden Sie dort.

— Ionutab

1

Leider hat keines der oben genannten Probleme für mich gelöst.

Ich wollte die Datei bootstrap-responsive.css nicht bearbeiten, also ging ich den einfachen Weg:

Erstellen Sie ein CSS mit Priorität vor bootstrap-responsive.css
Kopieren Sie den gesamten Inhalt von @media (min-width: 768px) and (max-width: 979px)(Zeile 461 mit der neuesten Bootstrap-Version 2.3.1 ab heute)
Fügen Sie es in Ihr CSS mit hoher Priorität ein
@media (min-width: 979px)Platzieren Sie in Ihrem CSS die Stelle, an der es @media (min-width: 768px) and (max-width: 979px)zuvor stand. Dies setzt den Stil von 768 bis 979 auf alles über 768.

Das ist es. Es ist nicht optimal, Sie haben CSS dupliziert, aber es funktioniert 100% perfekt!

— chech
quelle

1

Ich weiß nicht, ob hier darauf hingewiesen wurde. Die Einstellungen für die .containerBreite müssen auf der Bootstrap-Website festgelegt werden. Ich persönlich musste nichts in CSS-Dateien bearbeiten oder berühren, um meine zu optimieren.container Größe von 1600px anzupassen. Auf der Registerkarte Anpassen gibt es drei Abschnitte, die für die Medien und die Reaktionsfähigkeit des Webs verantwortlich sind:

Haltepunkte für Medienabfragen
Rastersystem
Behältergrößen

Neben Haltepunkten für Medienabfragen , auf die sich die meisten Leute beziehen, habe ich auch @container-desktopzu (1130px + @grid-gutter-width)und @container-large-desktopzu gewechselt (1530px + @grid-gutter-width). Jetzt .containerändert sich die Breite, wenn mein Browser auf ~ 1600px und ~ 1200px skaliert ist. Hoffe es kann helfen.

— Celdor
quelle