Bootstrap 3 - Verwenden Sie mehr als 12 Spalten in einer Zeile

9

Ich bin in eine Situation geraten, in der ich die Anzahl der Spalten in einer Zeile nicht begrenzen musste, da möglicherweise mehrere Inhaltsblöcke von Bereichen im Admin zum Bereich hinzugefügt werden würden.

Standardmäßig teilt das Verhalten von BS3 12 Spaltendivs mit, dass sie nicht floaten, was dazu führt, dass sie über die oberen Floatingdivs hinausgehen. Also habe ich eine Überschreibung als eine Klasse für mein System geschrieben und dachte, ich würde teilen, falls jemand anderes das Problem hat.

Wenn jemand eine bessere Idee oder einen besseren Vorschlag hat, würde ich gerne das Gefühl haben, dass ich Bootstrap nicht hacke ... aber hier habe ich es gelöst.

%Vor% %Vor%     
asleep 31.10.2014, 16:21
quelle

3 Antworten

17

Es ist nichts falsch daran, more als 12 Spalteneinheiten in .row zu verwenden, und tatsächlich ist der Bootstrap-Dokumentstatus:

  

"Wenn mehr als 12 Spalten innerhalb einer einzelnen Zeile platziert werden, wird jede Gruppe von zusätzlichen Spalten als eine Einheit in eine neue Zeile"

"eingefügt

Es gibt auch Beispiele in den Dokumenten, die zeigen, warum diese "Spaltenumbruch" notwendig ist: Ссылка . Es ist in Ordnung, mehr als 12 Einheiten in einem einzelnen .row. -Tag zu haben. Denken Sie daran, dass Sie möglicherweise Responsive-Resets verwenden müssen. 12 Einheiten sind eine Grenze der visuellen Reihe (horizontal über das Ansichtsfenster), aber nicht unbedingt ein .row div, das einfach eine Gruppierung von Spalten ist.

Lesen Sie mehr über das Bootstrap-Grid und warum oft mehr als 12 hintereinander erforderlich ist .

>     
ZimSystem 25.06.2015 11:29
quelle
10

Bootstrap wurde für eine 12-Farben-Nutzung gemacht.

Wenn Sie mehr Spalten haben möchten, müssen Sie mit Hilfe von Bootstrap Less-Variablen ( siehe hier ). Sie müssen diese Variablen hauptsächlich ändern:

  • @grid-columns : Anzahl der Spalten im Grid.
  • @grid-gutter-width Auffüllen zwischen Spalten. Wird für die linke und rechte Hälfte geteilt.
zessx 31.10.2014 16:25
quelle
4

Wenn Sie Flexibilität und Reaktionsfähigkeit mit einer großen Anzahl von Rastern benötigen, können Sie dead-simple-grid Ссылка und Versuchen Sie außerdem, die Verwendung von Medienabfragen in Grids zu minimieren, und lassen Sie sie mit

fließen

%Vor%
    
Sachin Kanungo 31.10.2014 16:35
quelle