Wenn das Raster angezeigt wird, sollte der Code so aussehen:
<div><div><p>Box 1</p></div><div><p>Box 2</p></div><div><p>Box 3</p></div><div><p>Box 4</p></div><div><p>Box 5</p></div><div><p>Box 6</p></div><div><p>Box 7</p></div><div><p>Box 8</p></div><div><p>Box 9</p></div><div><p>Box 10</p></div><div><p>Box 11</p></div><div><p>Box 10</p></div><div><p>Box 11</p></div><div><p>Box 8 </p> </div> <div> <p> Feld 9 </p> </div> <div> <p> Feld 10 </p> </div> <div> <p> Feld 11 </p> </div> <p> <P> Box 12 </p> </div> </div> </div> </div>
Wobei col-*-* die Säulenbreite darstellt, die vom Netzsystem unter verschiedenen Gerätenarten besetzt ist.
Extrem klein Mobiltelefon (<768px) | Klein Tablet (≥768px) | Mitte Computer (≥992px) | groß Computer (≥1200px) | |
|---|---|---|---|---|
| Container Maximale Breite | Keine (automatisch) | 750px | 970px | 1170px |
| Klassenname Präfix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Maximale Säulenbreite | Auto | ~62px | ~81px | ~97px |
| Säulenlücke | 15px (dh 30px ) | |||
Wenn die Höhe der Säule unterschiedlich ist, zerstört die Wirkung des Schwimmers die Struktur des Gitters, die durch die Verwendung der Antwortklasse vermieden werden kann. Hier ist ein vollständiger Rastercode:
<div><div><p>Box 1</p></div><div><p>Box 2</p></div><div></div><div><p>Box 3</p></div><div></div><div><p>Box 4</p></div><div></div><div><p>Box 5</p></div><div><p>Box 6</p></div><div></div><div><p>Box 7</p></div><div><p>Box 8</p></div><div></div><div><p>Box 8</p></div><div></div><div><p>Box 5</p></div><div></div><p>Box 6</p></div><div></div><div><p>Box 7</p></div><div><p>Box 8</p></div><div></div><div><p>Box 9</p></div><div></div><div><p>Box 10</p></div><div></div><div><p>Box 11 </p> </div> <div> <p> Box 12 </p> </div> </div> </div>
Das sichtbare-*-* gibt an, welches Gerät angezeigt wird, mit welchem Anzeigeattribut. Da die kleine Geräte standardmäßig in eine einzelne Spalte ausfällt, müssen die Antwortklasse nicht verwendet werden, um sie anzupassen.
Antwortklassen können auch in normalen Tags verwendet werden, wie z. B. der folgende Code:
<p> Dieser Absatz ist nur auf extra kleinen Geräten sichtbar. </p> <p> Dieser Absatz ist nur auf kleinen Geräten sichtbar.
In ähnlicher Weise können Sie auch Hidden-* verwenden, um es so einzustellen, dass sie sich in einem bestimmten Gerät ausblenden:
<p> Dieser Absatz ist nur auf extra kleinen Geräten versteckt. </p> <p> Dieser Absatz ist nur auf kleinen Geräten versteckt.
Die Antwortklasse kann auch das Druckformat festlegen:
Das obige ist das Gittersystem von Bootstrap3 -Studiennotizen (1), die vom Editor eingeführt wurden. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!