Zitat geschrieben von
zilloso habe die bootstrap.min.css geändert mit die hässliche schmale einstellung von 16,66667% wo mann noch nicht mal module einbauen kann weil die über den rand rüberragt. Ich werde dan mal meine Downlods wieder entfernen wenn hier rumgeheult wird. Das kotzt mich wieder an.
Hallo
Das Grid System von Bootstrap ist einfach erklärt.
Das Grid System hat 12 teilungen, jede teilung hat eine prozentuale breite zb
- 12 = 100%
- 11 = 91,66666667%
- 10 = 83.33333333%
- 9 = 75%
- 8 = 66.66666667%
- 7 = 58.33333333%
- 6 = 50%
- 5 = 41.66666667%
- 4 = 33.33333333%
- 3 = 25 %
- 2 = 16.66666667%
- 1 = 8.33333333%
Wenn du 3 Boxen haben möchtest, muss die gesamt zahl angegebenen grid immer 12 ergeben um eine breite von 100% zu erreichen zb
<div class="col-5"></div>
<div class="col-2"></div>
<div class="col-5"></div>
oder 4 boxen
<div class="col-2"></div>
<div class="col-4"></div>
<div class="col-3"></div>
<div class="col-2"></div>
Die angabe des Grid ist dir überlassen. Ich möchte damit sagen, ändere nicht die css sondern ändere die Grid angabe in der index.php
github.com/IlchCMS/Ilch-2.0/blob/master/application/layouts/clan3columns/index.php#L82 , zeile 95 und zeile 103 und in der index_full.php
github.com/IlchCMS/Ilch-2.0/blob/master/application/layouts/clan3columns/index.php#L82 und zeile 85 nach der obernen geschriebene liste.
Das Grid system binhaltet auch eine
@media ()
für die responsive darstellung des Layout. Bootstrap 3 hat dazu 4 unterteilung die ab eine gewisse Fenster breite greifen
- lg bis/ab 1170 px
- md bis/ab 920px
- sm bis/ab 772px
- xs unter 768px
Beispiel:
Du möchtest das dein content sich ab einer Fensterbreite von 1170px anders angezeigt wird als bei 772 pxß dan müsste man wie folgt vor gehen:
<div class="col-sm-12 col-lg-6"></div>
<div class="col-sm-12 col-lg-6"></div>
Mit diesem Beispiel wird dein content bis zur fenster breite von 768px in 2 teilen in der breite ausgegeben und unter 768px beide teile in volle breite und untereinander.
Hier ein link wo das Grid system genauer erklärt wird
www.w3schools.com/bootstrap/bootstrap_grid_system.asp .
Da ich zurzeit an der Migration von BS3 zu BS5 arbeite, gelden meine beispiele und link für BS3, unter BS5 sieht es ein bisschen anders aus.
Ich hatte mich anfangs auch schwer getan, aber mit übung und geduld schaffst du das Grid system auch zu verstehen, ansonsten einfach fragen und ganz wichtig "Kritik fähig sein".
Bei uns wirst du geholfen und nicht gehängt.
Slipi
Zuletzt modifiziert von Slipi am 19.10.2023 - 10:58:20
Fr. 25.08.2023
15:40 Uhr
#32
und unterstütze dies gerne
