Was ist der Unterschied zwischen col-lg und col-md in bootstrap3?

Was sind die Unterschiede zwischen col-lg, col-md ,col-xs und col-sm raster-system in bootstrap 3.

In einer bootstrap-Vorlage, die Sie verwendet <div class="col-lg-6 col-md-6 col-xs-12 col-sm-6"></div> nur für eine Spalte raster. Ich bin ein Anfänger in der Bootstrap.

Kommentar zu dem Problem

InformationsquelleAutor der Frage Hari Krishnan | 2013-11-27

  1. 43

    Bei der Verwendung von Bootstrap, das sind die Klassen, die für eine Spalte grid und entsprechen extra kleine, kleine, mittlere und große Geräte.

    .col-xs - = *Extra kleine Geräte (also Handys) (<768px)

    .col-sm = Kleine Geräte (also Tablets) (≥768px)

    .col-md = Medium-Geräte (dh Notebooks oder kleine desktops) (≥992px)

    .col-lg = Groß-Geräte (also Desktops) (≥1200px)*

    Diese Weise durch media queries können Sie nur die richtigen Klassen vom browser interpretiert. Wenn Sie im Internet surfen, die website von einem tablet zum Beispiel, werden Sie sehen, dass die css-Eigenschaften, die auch tatsächlich umgesetzt werden, im browser sind nur die, die für die .col-sm Klasse.

    UPDATE

    Auch ist es wichtig zu erwähnen, dass diese Klassen verwendet werden, die auf einem raster von 12-Spalten in Summe ist das grid-system-setup von Bootstrap.

    Daher, wenn Sie mit .col-sm-4 auf ein element, es bedeutet, dass das element 4 Spalten 12 der gesamten Breite.
    Was logischerweise bedeutet, dass, wenn .col-sm-4 verwendet, dann nur 3 Elemente pro Zeile passen, in die Seite auf dem tablet.

    Zum Beispiel, sagen wir, wir wollen zeigen einige Projekt-Karten für ein portfolio:

    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 card">
    <div class="card-wrapper">  
        <img src="img.jpg">
        <div class="overlay-text">
            <h5>Project 1</h5>
            <div class="labels">
                <label>Tech Stack</label>
                <h6>HTML5, CSS, JS</h6>
            </div>       
        </div>          
    </div> 
</div>

    Mit class="col-xs-12 col-sm-6 col-md-4 col-lg-3" alle zur gleichen Zeit verwendet wird, zu aktivieren verschiedene CSS-Eigenschaften eines Elements bei der Anzeige der Seite auf ein bestimmtes Gerät.

    In anderen Worten, wenn der Benutzer öffnet die Website auf einem desktop, col-lg-3 bedeutet, dass insgesamt 4 Karten werden angezeigt, wenn col-md-4 means insgesamt 3 Karten col-sm-6 insgesamt 2 Karten, und dann col-xs-12 bedeutet auf mobile nur 1 Karte wird mit 100% Breite angezeigt.

    InformationsquelleAutor der Antwort Alessandro Incarnati

  2. 3

    Alle diese tags xs, sm, md und lg Teil Bootstrap grid-system,. Bootstrap-grid-system ermöglicht es, bis zu 12 Spalten über die Seite. Bootstrap grid system responsive ist, und die Spalten neu anordnen, je nach Bildschirm-Größe: Auf einer großen Leinwand, es könnte besser Aussehen, mit der Inhalte in drei Spalten aufgeteilt, aber auf einem kleinen Bildschirm besser wäre es, wenn die Inhalte wurden gestapelt auf der jeweils anderen.

    Tipp: denken Sie Daran, dass grid-Spalten hinzufügen sollte bis zu zwölf für eine Zeile. Mehr als das, Spalten, Stapel-egal viewport.

    Grid-System, Regeln

    Einige Bootstrap-grid-system Regeln:

    • Zeilen gesetzt werden müssen, innerhalb eines .container (Feste Breite) oder .container-fluid (volle Breite) für die richtige Ausrichtung und Polsterung
    • Zeilen zur Erstellung von horizontalen Gruppen von Spalten
    • Inhalte gesetzt werden sollte, innerhalb der Spalten, nur Spalten können unmittelbar untergeordneten Zeilen
    • Vordefinierte Klassen, wie .row und .col-sm-4 sind verfügbar für die schnelle Herstellung grid-layouts
    • Spalten erstellen, Dachrinnen (Lücken zwischen dem Inhalt der Spalten) über Polsterung. , Polsterung ist im offset-Zeilen für die erste und Letzte Spalte über negative margin auf .rows
    • Grid-Spalten erstellt werden, indem Sie die Anzahl der 12 verfügbaren Spalten, die Sie möchten, span. Zum Beispiel drei gleiche Spalten würden drei .col-sm-4

    Ich würde empfehlen, durch dieser link und weiter verlinkten Seiten für besseres Verständnis.

    InformationsquelleAutor der Antwort Janusz01

  3. 1

    Fügten Sie alle diese Klassen für ein grid-Spalte in der Vorlage, weil diese Klassen entsprechen der Spalte extra kleine, kleine, mittlere und große Geräte.

    .col-xs = *Extra small devices (ie Phones) (<768px)

.col-sm = Small devices (ie Tablets) (≥768px)

.col-md = Medium devices (ie laptops, or small desktops) (≥992px)

.col-lg = Large devices (ie Desktops) (≥1200px)*

    InformationsquelleAutor der Antwort user7030914

Schreibe einen Kommentar