webentwicklung-frage-antwort-db.com.de

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-# unterscheiden sich von normalen alten col-# insofern gelten sie nur, wenn die Bildschirme eine bestimmte Größe überschreiten (768px bzw. 992px). Wenn Sie -sm- oder -lg- weglassen, werden die divs niemals in einer Spalte zusammengefasst.

Wenn ich jedoch zwei Divs in einer Zeile erstelle, die beide col-sm-6 anscheinend sind sie nur nebeneinander, wenn das Fenster zwischen 768px und 992px breit ist. Mit anderen Worten, wenn ich das Fenster ganz verkleinere und dann langsam breiter mache, ist das Layout einspaltig, dann zweispaltig, dann zurück zu einspaltig wieder.

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

[UPDATE BELOW]

Ich habe mir die Dokumente noch einmal angesehen und anscheinend einen Abschnitt übersehen, in dem speziell darauf eingegangen wird.

Die Antworten auf meine Fragen:

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

  2. Ja, die Klassen sollen kombiniert werden.

  3. Dies scheint in bestimmten Fällen angemessen zu sein, 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 auf Bootstrap 3 mit einer "Bootstrap 2-Mentalität" gekommen bin. Insbesondere habe ich die (optionalen) Reaktionsstile (Bootstrap- responsive.css) in v2 und v3 ist ganz anders (zum besseren IMO).

PDATE für stabile Veröffentlichung:

Diese Frage wurde ursprünglich geschrieben, als RC1 raus war. Sie haben einige wichtige Änderungen in RC2 vorgenommen, sodass für alle, die dies jetzt lesen, nicht alle oben genannten Änderungen weiterhin gelten.

Ab dem Zeitpunkt, an dem ich dies gerade schreibe, ist der col-*-# Klassen scheinen aufwärts 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, gehen Sie folgendermaßen vor:

<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.)

60
emersonthis

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

Es werden auch Mixins usw. behandelt.

39
Srikanth

Um die obige Antwort von SDP zu ändern, müssen Sie NICHT _col-xs-12_ in _<div class="col-xs-12 col-sm-6">_ deklarieren. Bootstrap 3 ist Mobile-First, daher wird angenommen, dass jede Div-Spalte standardmäßig eine Div-Breite von 100% hat - was bedeutet, dass sie bei der Größe "xs" immer eine Breite von 100% hat unabhängig davon, was Sie bei _sm, md, lg_ eingestellt haben. Wenn Ihre xs -Spalten nicht 100% sein sollen, führen Sie normalerweise eine col-xs-(1-11) aus.

5
helloerik

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

Erstens, da B3 zuerst mobil ist, sind die Spalten bei Verwendung von xs von Large-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 mit unterschiedlicher Breite versehen möchten, können Sie mehrere Klassen hinzufügen, z

das Obige ändert die Breite entsprechend der Bildschirmauflösung. ERINNERN SIE SICH, dass ich die Gesamtspalten in jeder Klasse = 12 behalte

Ich hoffe meine Antwort würde helfen!

4
Aslam

"Wenn ich zwei Spalten für mehr als 768px haben 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 auch nicht den col-lg-6 Hinzufügen.

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

4
Zim