Lassen Sie uns Bootstrap unkompliziert machen!
Beachten Sie, wie der col-sm die 100% -Breite einnimmt (mit anderen Worten, er bricht in eine neue Zeile ein) 576px, col jedoch nicht. Sie können die aktuelle Breite in der oberen Mitte in GIF sehen.
Hier kommt der Code:
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Bootstrap richtet standardmäßig alle Spalten (col) in einer einzelnen Zeile mit gleicher Breite aus. In diesem Fall colbelegen drei unabhängig von der Bildschirmgröße jeweils 100% / 3 Breite. Sie können das in gif bemerken.
Was ist nun, wenn wir nur eine Spalte pro Zeile rendern möchten, dh jeder Spalte 100% Breite geben möchten, aber nur für kleinere Bildschirme ? Jetzt kommt der col-xxUnterricht!
Ich habe verwendet, col-smweil ich die Spalten in separate Zeilen unter 576px aufteilen wollte. Diese 4 col-xxKlassen werden von Bootstrap für verschiedene Anzeigegeräte wie Handys, Tablets, Laptops, große Monitore usw. bereitgestellt.
So col-smwürde unter 576px brechen, col-mdunter 768px brechen würde, col-lgunter 992px brechen würde und col-xlwürde brechen unter 1200px
Beachten Sie, dass col-xsBootstrap 4 keine Klasse enthält.
Das fasst so ziemlich alles zusammen. Sie können wieder arbeiten.
Aber es steckt noch ein bisschen mehr dahinter. Jetzt kommt das col-*und col-xx-*zum Anpassen der Breite.
Denken Sie daran, dass ich im obigen Beispiel erwähnt habe, dass coloder col-xxdie gleiche Breite in einer Reihe nimmt. Wenn wir also einem bestimmten mehr Breite geben möchten, colkönnen wir dies tun.
Die Bootstrap-Zeile ist in 12 Teile unterteilt, sodass im obigen Beispiel 3 vorhanden waren, colsodass jeder 12/3 = 4 Teile benötigt. Sie können diese Teile als eine Möglichkeit zum Messen der Breite betrachten.
Wir könnten auch , dass im Format schreiben col-*also col-4wie folgt aus :
<div class="row">
<div class="col-4">col</div>
<div class="col-4">col</div>
<div class="col-4">col</div>
</div>
Und es hätte keinen Unterschied gemacht, da Bootstrap standardmäßig die gleiche Breite wie col(4 + 4 + 4 = 12) ergibt .
Aber was ist, wenn wir 7 Teile dem 1. col, 3 Teile dem 2. colund 2 Teile (12-7-3 = 2) dem 3. col(7 + 3 + 2, also insgesamt 12) geben möchten , können wir dies einfach tun:
<div class="row">
<div class="col-7">col-7</div>
<div class="col-3">col-3</div>
<div class="col-2">col-2</div>
</div>
und Sie können auch die Breite der col-xx-*Klassen anpassen .
<div class="row">
<div class="col-sm-7">col-sm-7</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-2">col-sm-2</div>
</div>
Wie sieht es in der Aktion aus?
Was ist, wenn die Summe von colmehr als 12 ist? Dann wird der colunter die untere Linie verschoben / angepasst. Ja, eine Zeile kann beliebig viele Spalten enthalten!
<div class="row">
<div class="col-12">col-12</div>
<div class="col-9">col-9</div>
<div class="col-6">col-6</div>
<div class="col-6">col-6</div>
</div>
Was ist, wenn wir für große Bildschirme 3 Spalten in einer Zeile möchten, diese Spalten jedoch für kleine Bildschirme in 2 Zeilen aufteilen ?
<div class="row">
<div class="col-12 col-sm">col-12 col-sm TOP</div>
<div class="col col-sm">col col-sm</div>
<div class="col col-sm">col col-sm</div>
</div>
Sie können hier herumspielen : https://jsfiddle.net/JerryGoyal/6vqno0Lm/
px.