2017-02-02 4 views
0

Ich benutze Bootstrap und ich frage mich, was wäre eine saubere Möglichkeit, einen Hintergrund zu meinem Container geben.CSS Bootstrap Container Hintergrund

Ich verwende die Bootstrap-Klasse container, nicht container-fluid. Bootstrap doc sagt klar, dass ich Container nicht nisten sollte. Was ist die Alternative, um dieses Ziel zu erreichen? Wenn ich einen Hintergrund zu meinem container der linken und rechten Ränder sind immer noch weiß, möchte ich auch diesen Raum, aber ich möchte auch meine Inhalte ausgerichtet sein, wie die container ausgerichtet ist, nicht die Art, wie die container-fluid ausgerichtet ist. Irgendwelche Vorschläge ? Meine aktuelle Lösung verschachtelt eine container innerhalb container-fluid und entfernen Sie die Polsterung von der ersten, aber ich möchte eine bessere Lösung, die nicht gegen die Bootstrap-Dokumentation gehen.

Vielen Dank im Voraus!

EDIT

ist hier zum Beispiel, was ich

<div class="container-fluid my-class"> 
    <div class="container"> 
     Some rows and columns here 
    </div> 
</div> 

hatte und ich Bootstrap die Polsterung in css dann

.container-fluid { 
    padding-left: 0; 
    padding-right: 0; 
} 

.my-class { 
    background: red; 
} 

Aber, wie gesagt, das ist die schlechte außer Kraft setzen Weg, es zu tun.

+0

Zeigen Sie den Code, was Sie bisher gemacht haben. Wie viel hast du implementiert? –

+0

Ich habe meine Frage aktualisiert, um meine Struktur zu zeigen –

Antwort

3

Bootstrap doc clearly states that I shouldn't nest containersunter anderen Behältern. Also einfach Nest Ihr div-Container unter einer neuen Klasse div sagen, container-bg und fügen Sie den Hintergrund-Bild in diesem div wie folgt aus:

HTML:

<div class="container-bg"> 
    <div class="container"> 
     <!-- your content --> 
    </div> 
</div> 

CSS:

.container-bg { 
    background: xxx; 
} 
+0

Hmmm, so einfach in der Tat, jetzt frage ich mich, warum ich mich so sehr mit Bootstrap-Klassen beschäftigt habe. Kleiner Tippfehler: Sie benannten die Klasse anders in css –

+0

@George Oh Scheiße. Tippfehler behoben. Danke für den heads-up Mann. –

2

Wenn Sie den Hintergrund für die gesamte Seite festlegen möchten, setzen Sie sie auf body.

Wenn Sie es für einen Abschnitt der Seite festlegen möchten, dann wickeln Sie diesen Abschnitt in einem entsprechenden Element (z. B. div oder section), fügen Sie eine Klasse, ID oder eine andere Möglichkeit, es mit einem Selektor ... gerecht nicht eine, die eine Klasse verwendet von Bootstrap verwendet.

Verwandte Themen