Boostrap manuell die Container-width bearbeiten

3 Antworten

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

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%;
}

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.

Bild oder Elemente unter Div Bereich anordnen

Hallo, ich möchte ein Bild in einem Div Container immer horizontal und vertikal zentriert haben. Der Div Container hat eine feste Höhe und eine variable Breite (z.B 30%). Somit muss das Bild größer als der Div Container sein. Die Zentreirung funktioniert nur das Problem ist das das Bild nicht an den Kanten des Div´s abgeschnitten wird sondern man das ganze Bild sieht. Meine Frage ist nun wie kann ich größere Bilder oder Elemente nicht außerhalb des div´s anzeigen lassen, wenn ich sie in den div-bereich setzte ?

<div id="kasten">   <- nur sichtbarer Bereich des darunter
                        liegendem divs (z.B. width: 30%;
                        height: 500px; )
<div id="größeresbild">  <- übernimmt die Positionierung des Bildes
<img .... das Bild >
</div>
</div>) 
...zur Frage

CSS-Befehl für responsive Design wird einfach ignoriert (webdesign)

Ich habe eine CSS-Datei und in der steht folgender CSS-Befehl:

/* Tablet Layout: 768px */ @media only screen and (min-width: 768px) and (max-width: 960px) { .content p { color:red; } }

Die Webdeveloper-Tools von Chrome zeigen mir beim Einschalten der mobile-Funktion die Schrift in rot, mache ich den Browser schmaler klappt auch alles. Nur das Google-Responsive-Testing-Tool und mein Smartphone machen das aufs Verrecken nicht. Warum? Ich check es nicht..

...zur Frage

Boostrap: Bild über ganze Breite des Browserfensters strecken?

Es ist vielleicht eine dumme Frage, aber ich kriege es nicht hin (kenne mich nicht aus mit Bootstrap):
Man soll ja laut Bootstrap-Anleitung seine Elemente in ein div stecken, das entweder die Klasse "container" oder "container-flui" hat. Ich wollte die Klasse "container" benutzen, weil ich nicht will, dass meine Texte über die ganze Breite gehen, habe aber gleichzeitig ein paar Bilder, die über die gesamte Breite des Browserfenster gehen sollen, was mit "container" aber nicht zu funktionieren scheint. Mit container-fluid schon, aber dann gehen auch die Texte über die ganze Breite. Und den Texten einfach eine max-width und margin: 0 auto zu geben scheint auch nicht zu funktionieren. Noch eine Info: ich habe den Texten und Bildern col-md-12 gegeben.

Kann mir jemand sagen, wie man das macht? (Mit Bootstrap Bilder über die ganze Breite strecken, aber Texte nicht?)

Vielen Dank im Voraus

...zur Frage

Was möchtest Du wissen?