it-swarm.dev

Verwendung von Bootstrap mit 16 oder 24 Spalten

Ich brauche etwas Hilfe, um Bootstrap 2.0.4 auf 16 oder 24 Spalten anstatt auf die Standardspalten von 12 einzustellen. Ich kann nicht verstehen, was ich falsch mache .less file und rekompilieren bootstrap.less mit Crunch, aber für beide Versuche habe ich immer noch dasselbe Ergebnis. Es sind immer noch 12 Spalten !!! Wenn ich versuche, ein div auf span12 zu setzen, dauert es immer noch den ganzen Bildschirm?

Kann jemand mich zu dem führen, was ich nicht mache, oder wenn jemand eine 16- und 24-Säulen-Version erzeugen und mir diese schicken kann, wäre das perfekt

22
Joseph Girgis

Diese Methode gilt für eine ältere Version von Bootstrap - Version 2.3.1

Klicken Sie auf diesen Link, um Bootstrap anzupassen: http://Twitter.github.com/bootstrap/customize.html

Beispiele finden Sie hier. Ändern Sie die Parameter entsprechend Ihren Anforderungen.

16 Grid system with Gutter
@gridColumns: 16
@gridColumnWidth: 45px
@gridGutterWidth: 15px
@gridColumnWidth1200: 52.5px
@gridGutterWidth1200: 22.5px
@gridColumnWidth768: 31.5px
@gridGutterWidth768: 15px

16 Grid system without Gutter
@gridColumns: 16
@gridColumnWidth: 60px
@gridGutterWidth: 0px
@gridColumnWidth1200: 75px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 46.5px
@gridGutterWidth768: 0px

24 Grid system with Gutter
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 1px
@gridColumnWidth1200: 35px
@gridGutterWidth1200: 15px
@gridColumnWidth768: 21px
@gridGutterWidth768: 10px

24 Grid system without Gutter
@gridColumns: 24
@gridColumnWidth: 40px
@gridGutterWidth: 0px
@gridColumnWidth1200: 50px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 31px
@gridGutterWidth768: 0px
19
Hasan Atbinici

Für 24 Spalten können Sie die Hauptdivision aufteilen

<div class="col-md-12">

    <div class="col-md-6">
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
    </div>

    <div class="col-md-6">12 here</div>

</div>

codepen Demo

13

Einfach genug, um in weniger zu ändern - http://Twitter.github.com/bootstrap/scaffolding.html#gridCustomization

Sie möchten die Variablen dort ändern, was Sie möchten - 

z.B.

@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 10px

Wenn Sie ein Fluid-Grid verwenden, müssen Sie diese Variablen auch proportional ändern. Andernfalls nimmt span12 immer noch 100% der Breite und span24 200% ein.

@fluidGridColumnWidth
@fluidGridGutterWidth

Wie erwähnt:

Wie anpassen?

Wenn Sie das Raster ändern, müssen Sie die drei @ grid * -Variablen ändern und Bootstrap neu kompilieren. Ändern Sie die Rastervariablen in variables.less und verwenden Sie eine der vier dokumentierten Möglichkeiten, um neu zu kompilieren. Wenn Sie weitere Spalten hinzufügen, müssen Sie unbedingt das CSS für diejenigen in grid.less hinzufügen.

Sie können die Variablen ändern und die neue CSS direkt hier herunterladen: http://Twitter.github.com/bootstrap/download.html#variables

Hier ist ein kompiliertes Beispiel, das für 16 Spalten funktionieren sollte (nicht getestet, lassen Sie mich wissen, wie es funktioniert): https://s3.amazonaws.com/intenex/bootstrap16columns.Zip

11
Intenex

Bearbeiten: Das Erstellen von Rastern mit einer benutzerdefinierten Spaltenanzahl wurde wiederhergestellt und kann auf Bootstraps Anpassungsseite ausgeführt werden.

Aus mir unbekannten Gründen können Sie mit der neuesten Version von Bootstrap (3.0.0/1) kein anderes Gitter als 12 Spalten erstellen, was sehr schade ist. 

Was wir derzeit tun können und was wiederum die Erstellung weiterer angepasster Bootstrap-Pakete ermöglicht, ist die Einrichtung eines eigenen Bootstrap-Anpassers.

Edit: Ich habe es gerade ausprobiert. Die Installation aller Abhängigkeiten verlief reibungslos und hielt sich an die Richtlinien auf ihrer Docs-GitHub-Seite.

Beispiel generiert Raster mit 24 Spalten

Editor required inserting some code along with jsfiddle link. There's no point in pasting anything though.
4
Maciej Gurban

16 Spalte

960px

45px * 16 = 720 Spalte

15px * 16 = 240 Rinne

1200px

53px * 16 = 848 Spalte

22px * 16 = 352 Rinne

768px

33px * 16 = 528 Spalte

15px * 16 = 240 Rinne

3
User

Aktualisiert 2018

Diese Frage wird erneut für die neueste Bootstrap 4 behandelt. Da Bootstrap 4 nun Flexbox ist und Auto-Layout-Spalten enthält, ist es einfach, Layouts mit einer beliebigen Anzahl von n Spalten zu erstellen. .

16 Spalten

<div class="row">
            <div class="col">
                1
            </div>
            <div class="col">
                2
            </div>
            <div class="col">
                ... to 16
            </div>
</div>

24 Spalten

<div class="row">
            <div class="col">
                1
            </div>
            <div class="col">
                2
            </div>
            <div class="col">
                ... to 24
            </div>
</div>

Demo: https://www.codeply.com/go/4sQGt2qKyr


Siehe auch: N Anzahl der Spalten in Bootstrap 4

1
Zim

Sie können das width-Attribut mit einem Prozentsatz wie folgt überschreiben:

    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>

Es wird sogar die Reaktionsfähigkeit aufrechterhalten.

0
Chieu Nhat Nang

Set 24 Spalten:

960
35px-Spalte
5 px Rinne

1200
40px-Spalte
10px Rinne

768
29px-Spalte
.P. Rinne

0
User

Hier ist eine schnelle und einfache Möglichkeit, 16 Spalten mit Verschachtelung zu erstellen ...

.no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
<div class="row">
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
</div>
<!-- row -->

0
nalcus

Ich verwende Raster 30 Spalten für mein Projekt (Raster 24 und 100 auch verfügbar)

https://github.com/zirafa/bootstrap-grid-only

je nach Anforderung sind möglicherweise einige Anpassungen erforderlich

0
Arun Prasad E S