wie semantic-ui default ändern 16 Spaltenanzahl auf 24

Question

Ich habe versucht, eine "@columnCount: 24;" in src/site/globals/site.variables und führe "gulp build" aus, aber es stellt sich heraus, dass sich nichts geändert hat.

Ein weiterer Zweifel ist, selbst wenn das funktioniert, kann ich etwas wie "zwanzig breite Spalte" für meine Seitenelemente verwenden?

Answer 1

Direkt vom Semantic UI Webseite:

Alle Grid-Systeme verwenden, um eine beliebige Spaltenanzahl. Das Standardthema von Semantic nimmt 16 Spalten an. Diese Zahl kann in Ihrem Projekt angepasst werden, indem Sie den Wert @columnCount in site.variables anpassen.

Answer 2

Die @columnCount Variable nur gehen kann 16

Seit Semantic-UI mit einer 16-Säule Standard gebaut wurde, alle anderen damit verbundenen Variablen und Berechnungen aus, dass auf Basis. Um höher als 16 Spalten zu gehen, müssen Sie die entsprechenden Stellen finden und die notwendigen Variablen, Berechnungen und Klassen hinzufügen, damit es funktioniert.

Allerdings gibt es ein paar einfachere Möglichkeiten, die ich denke, dass Sie erreichen könnten, was Sie suchen.

Erstens, anstatt mehr Spalten hinzufügen, können Sie möglicherweise erreichen, was Sie suchen, indem Sie die Ränder und Paddings der entsprechenden Elemente oder möglicherweise durch die Verwendung der "entspannten" oder "sehr entspannt" -Klassen.

Aber wenn Sie unbedingt so viele Spalten benötigen, versuchen Sie es mit nested grids.

So etwas wie dies vielleicht:

<div class="ui two column grid"> 
    <div class="column"> 
    <div class="ui ten column grid"> 
    </div> 
    </div> 
    <div class="column"> 
    <div class="ui ten column grid"> 
    </div> 
    </div> 
</div>