Grundlegendes zu den Rasterklassen (col-sm- # und col-lg- #) in Bootstrap 3

Ich fange mit Bootstrap 3 an und habe Probleme zu verstehen, wie die Grid-Klassen verwendet werden sollen.

Folgendes habe ich bisher herausgefunden:

Es scheint , dass die Klassen col-sm-#und col-lg-#von einfachen alten unterscheiden sich col-#dadurch , dass sie nur gelten , wenn Bildschirme ab einer bestimmten Größe sind (768px und 992px respectively). Wenn Sie -sm- oder -lg- weglassen, werden die Divs niemals in einer Spalte zusammengefasst.

Wenn ich jedoch zwei Divs in einer Reihe erstelle, die beide sind col-sm-6, scheinen sie nur nebeneinander zu liegen, wenn das Fenster zwischen 768px und 992px breit ist. Mit anderen Worten, wenn ich das Fenster schrumpfen den ganzen Weg nach unten und dann langsam erweitern, ist das Layout einzelne Spalte, dann zwei Spalten, dann wieder auf einzelne Spalte wieder .

1. Ist das das beabsichtigte Verhalten?
2. Wenn ich zwei Spalten für etwas über 768px möchte, sollte ich beide Klassen anwenden ? ( <div class="col-sm-6 col-lg-6">)
3. Sollte col-6 auch enthalten sein?<div class="col-6 col-sm-6 col-lg-6">

[UPDATE UNTEN]

Ich habe mir die Dokumente noch einmal angesehen und anscheinend einen Abschnitt übersehen, der speziell darüber spricht.

Die Antworten auf meine Fragen:

1. Ja, sie gelten nur für bestimmte Bereiche und nicht für alle Bereiche ab einer bestimmten Breite.

2. Ja, die Klassen sollen kombiniert werden.

3. Es scheint, dass dies in bestimmten Fällen angemessen ist, in anderen jedoch nicht, da die col- # -Klassen grundsätzlich col-xsm- # oder Breiten über 0px (alle Breiten) entsprechen.

Abgesehen davon, dass ich die Dokumente zu schnell gelesen habe, war ich verwirrt, weil ich mit einer "Bootstrap 2-Mentalität" zu Bootstrap 3 gekommen bin. Insbesondere habe ich die (optionalen) Responsive-Stile (bootstrap-responsive.css) in Version 2 verwendet, und Version 3 ist ganz anders (zur besseren IMO).

UPDATE für stabile Veröffentlichung:

Diese Frage wurde ursprünglich geschrieben, als RC1 aus war. Sie haben einige wichtige Änderungen in RC2 vorgenommen, sodass für alle, die dies jetzt lesen, nicht alles gilt, was oben erwähnt wurde.

Ab dem Zeitpunkt, an dem ich dies schreibe, col-*-#scheinen die Klassen nach oben zu gelten. Wenn Sie beispielsweise möchten, dass ein Element 12 Spalten (volle Breite) für Telefone, aber zwei 6 Spalten (halbe Seite) für Tablets und höher enthält, würden Sie Folgendes tun:

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

(Sie haben auch einen zusätzlichen xs-Haltepunkt hinzugefügt, nachdem diese Frage geschrieben wurde.)

Hier haben Sie ein sehr gutes Tutorial, das erklärt, wie Sie die neuen Grid-Klassen in Bootstrap 3 verwenden.

Es umfasst auch Mixins usw.

"Wenn ich zwei Spalten für etwas über 768px möchte, sollte ich beide Klassen anwenden?"

Dies sollte so einfach sein wie:

<div class="row">
      <div class="col-sm-6"></div>
      <div class="col-sm-6"></div>    
</div>

Sie müssen das auch nicht hinzufügen col-lg-6.

Demo: http://www.bootply.com/73119

Der beste Weg zu verstehen ist, einfach von oben nach unten zu denken (große Desktops zu Mobiltelefonen)

Erstens, da B3 zuerst mobil ist. Wenn Sie also xs verwenden, sind die Spalten von großen Desktops bis xs gleich (ich empfehle die Verwendung von xs oder sm, da dadurch auf jeder Bildschirmgröße alles so bleibt, wie Sie es möchten).

Zweitens, wenn Sie Spalten auf verschiedenen Geräten oder Auflösungen eine andere Breite zuweisen möchten, können Sie mehrere Klassen hinzufügen, z

Das Obige ändert die Breite entsprechend den Bildschirmauflösungen. Denken Sie daran, ich behalte die Gesamtspalten in jeder Klasse = 12

Ich hoffe meine Antwort würde helfen!

SDP Antwort zu ändern oben, Sie brauchen nicht zu erklären col-xs-12in <div class="col-xs-12 col-sm-6">. Bootstrap 3 ist Mobile-First, daher wird angenommen, dass jede Div-Spalte standardmäßig eine Div mit 100% Breite ist. Dies bedeutet, dass bei der Größe "xs" eine Breite von 100% immer standardmäßig dieses Verhalten verwendet wird, unabhängig davon, was Sie festgelegt haben sm, md, lg. Wenn Sie möchten, dass Ihre xsSpalten nicht 100% sind, führen Sie normalerweise a aus col-xs-(1-11).

Dies könnte zu spät sein, da ich denke, dass die meisten von uns BS4 verwenden. In diesem Artikel wurden alle von Ihnen gestellten Fragen ausführlich und einfach erläutert. Außerdem wird erläutert, was wann zu tun ist. Die ausführliche Anleitung zur Verwendung von bs4 oderbootstrap

https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7