Boostrap manuell die Container-width bearbeiten
Hallo,
ich bin noch ein ziemlicher Anfänger was Bootstrap und Responsive Design angeht deswegen steig ich bei dem Thema noch nicht so ganz durch :o
Und zwar möchte ich wissen, wie ich nun festlege das meine .container width 1600px haben soll ? Wenn ich dies in der Boostrap-CSS bearbeite zerschießsts bei mir die ganze website :/
Ich hoffe ihr könnt mir helfen, danke und Liebe Grüße
3 Antworten
Die .container Klasse direkt zu bearbeiten ist schon die richtige Vorgehensweise (sofern du ohne CSS-Präprozessor, also mit reinem CSS arbeitest).
Was genau wird denn "zerschossen"? Wenn deine Vorlage ursprünglich für eine andere Maximalbreite gestaltet wurde, wirst du vermutlich nicht drum herum kommen, auch andere Elemente entsprechend anzupassen wenn du die Maximalbreite veränderst.
Du solltest auch bedenken, dass die Breite des Containers im Normalfall an mehreren Stellen im CSS definiert wird (für verschiedene Bildschirmgrößen). So weit ich weiß arbeitet Bootstrap hier mit festen Werten z.B.:
.container {
width: 480px; /*kleinst mögliche Größe*/
}
@media (min-width: 768px) {
.container {
width: 700px;
}
}
@media (min-width: 1200x) {
.container {
width: 1000px;
}
}
@media (min-width: 1600px) {
.container {
width: 1200px; /* Maximalbreite */
}
}möglich wäre aber natürlich auch einfach so etwas:
.container {
width: 80%;
}
Mach das nicht per Hand sondern mach es auf der bootstrap-seite da hast du ne art online preprozessor wo du das editieren kannst einfach selbst in den Klassen rumzuwerkeln ist eher für erfahrende Leute da dort viele Abhängigkeiten sind
In welcher CSS datei hast Du den Container bearbeitet? Einen einfachen Bootstrap Designer findest Du auch unter andjan.de Der nimmt Dir die ganze Arbeit ab.