CSS - 5 gleiche Bootstrap-Spalten

Question

Ich weiß, dass diese Frage schon oft gestellt wurde, aber mein Fall ist ein bisschen "spezifisch". Ich verwende eine Vorlage für TYPO3 und es hat ein Bootstrap-Inhaltselement, in dem ich der Vorlage sagen kann, wie viele Spalten ich benötige etc. Dann rendert es den HTML-Code.

Here's the website.

Wie Sie sehen können, habe ich 2 Zeilen, die 5 Spalten pro Zeile enthalten, und ich möchte, dass sie den ganzen Raum verwenden, der links und zentriert ist. Wie mache ich das?

Answer 1

Ein Gitter ist nicht die richtige Wahl für Elemente, die gleichmäßig beabstandet und nicht an den Gitterlinien ausgerichtet sein müssen. Sie können Ihr Ziel jedoch leicht erreichen, indem Sie das CSS flexible Box-Modell (aka flexbox) in der Zeile verwenden, die die Elemente enthält.

Der folgende CSS-Code setzt den Container als Flexbox, teilt ihm den Inhalt gleichmäßig über den gesamten verfügbaren Platz mit und verbirgt das ::after Pseudoelement, das bei diesem Ansatz nicht benötigt wird. Es sind keine Änderungen am HTML erforderlich. Bei Browsern, die Flexbox nicht unterstützen (unter IE 11) sieht alles wie vorher aus.

div#c1131 > .row { 
    display: flex; 
    justify-content: space-between; 
    overflow: hidden; 
} 

div#c1131 > .row::after { 
    display: none; 
} 

Wenn Browser-Kompatibilität ein Problem stellen Sie sicher, überprüfen gegen caniuse oder ähnliche Dienstleistungen.

Answer 2

Wie ich weiß, hat das Standardraster in Bootstrap 12 Teile. Also, wenn Sie 5 Spalten in einer Zeile verwenden wollen, ist das nicht wirklich möglich.

Entweder Sie verwenden eine Rasterspaltennummer, die in 3, 4 und 5 Spalten unterteilt werden kann (60) oder Sie verwenden ein eigenes CSS für diesen speziellen Fall.

Answer 3

einfach diesen HTML hinzufügen in vor Ihrer angegebenen Spalten in derselben Mutter div

<div class="col-lg-1"></div> 

Answer 4

Ohne in diesen Situationen etwas mit CSS zu ändern: Bootstrap hat 12 Spalten: Sie können also 2 cols für jede Box verwenden, die bedeutet, dass Sie 10 Spalten verwendet haben und zwei frei sind. Diese zwei Spalten können Sie verwenden, eine vor der ersten Box als Offset und nach der letzten Box sollten Sie eine klare Korrektur hinzufügen.