Bootstrap-Spalten in der mobilen version

Ich bin mit bootstrap, um eine website zu machen, aber es ist etwas falsch ist.

Ich möchte 2 Zeilen und 3 Spalten und wenn der Bildschirm wechselt zum mobile, möchte ich es auf 3 Zeilen und 2 Spalten.

Desktop

|A|   |B|   |C| 
|D|   |E|   |F|

Mobile

|A|  |B|
|C|  |D|
|E|  |F|

Ich verwendete den folgenden code, um es zu tun, aber die Bilder bleiben nicht, wie ich es mir vorstelle.

<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
</div>

Die Bilder so bleiben

|A| |B|
    |C|
|D| |E|
|F|

Vielen Dank im Voraus!

InformationsquelleAutor Fernanda Luiz Pinto | 2016-10-09
  1. 4

    Ich habe laufen in dieses problem vor. Das Problem war, dass meine Inhalte unterschiedlichen Höhen. Da Bootstrap verwendet schwimmt anordnen, Spalten die Spalte C kann nicht schwimmen den ganzen Weg nach Links, wenn die Spalte A größer ist als Spalte B.

    Habe ich ein link zu einem codepen so können Sie in Aktion sehen. Die beiden oberen Zeilen sind exakt dein code oben, während die unteren zwei Zeilen zeigen ein div mit einer anderen Höhe als die anderen divs.

    http://codepen.io/egerrard/pen/PGRQYK

    Die Lösung für Sie sein, um die Höhe des divs, um die max Höhe für alle Ihre Inhalte. So etwas wie 

    .maxHeightDiv {
    height: 200px;
}

    Werden Sie wahrscheinlich haben, um Höhen für unterschiedliche Fenster-breiten. Es kann ein wenig ärgerlich, aber dies ist eine Einschränkung des bootstrap-float-system.

    • Genau das war mein problem, danke!
    InformationsquelleAutor Eric G
  2. 0

    Obwohl dieser alt ist, vielleicht hilft es ja einigen von Euch.

    Mein Weg ist mehr code, als wahrscheinlich notwendig ist, aber ich konnte nicht, kam mit einem bootstrap-grid-system-Lösung, die unterschiedliche Spalten-und Zeilen-änderungen in Kombination mit screen-Breite verpasst.

    Also lasst uns beginnen:

    • Wechsel zu .scss und implementieren bootstrap-responsive Funktionen
    • Gehören einem übergeordneten div-das wirkt wie ein Blick toggle container für Ihre bootstrap-Gitter-system
    • Nutzung von display: none !important und display: inline !important für die divs
    • Ein Tipp, stellen Sie die Breite des Bildes Klasse max-widht: 100%; es zwingen wird, die Bilder zu nehmen so viel Platz wie Sie können, ohne überschreitung Ihrer Eltern Breite; es sei denn, Sie möchten verschiedene, einzigartige Größen natürlich

    .scss: (überprüfen Sie Ihre bootstrap-css -version ) 

    $stageZero: 540px;
$stageOneLower: 719px;
$stageOneHigher: 720px;
$stageTwoLower: 959px;
$stageTwoHigher: 960px;
$stageThree: 1140px;

@mixin stage00 {
  @media (max-width: $stageZero) { @content; }
}

@mixin stage01 {
  @media (min-width:$stageOneLower) and (max-width:$stageOneHigher)  { @content; }
}

@mixin stage02 {
  @media (min-width:$stageTwoLower) and (max-width:$stageTwoHigher) { @content; }
}

@mixin stage03 {
  @media (min-width: $stageThree) { @content; }
}
.mobileViewToggle {
    @include stage00 {display: inline !important;}
    @include stage01 {display: none !important;}
    @include stage02 {display: none !important;}
    @include stage03 {display: none !important;}
}
.desktopViewToggle {
    @include stage00 {display: none !important;}
    @include stage01 {display: inline !important;}
    @include stage02 {display: inline !important;}
    @include stage03 {display: inline !important;}
}

    .html:

    <div class="mobileViewToggle">
    < Bootstrap Grid Code with xs prefix, e.g. col-xs-4>
</div>

<div class="desktopViewToggle">
    < Bootstrap Grid Code with sm prefix, e.g. col-sm-6>
</div>
    InformationsquelleAutor JasParkety
  3. -1

    Können Sie die unten-Klasse wie abgebildet...

    1. col-xs-2 werden zwei Spalten, nur auf die xs-Geräte-(mobile)
    2. col-md-3 - 3 Spalten auf allen anderen Geräten die mobile

    <div class="row">
    <div class="col-xs-2 col-md-3">Content</div>
    ....
    </div>

    Sie können nicht ändern, die Zeilen jedoch ohne Verwendung von js.
    Außerdem,auf mobile,ist es wirklich Fragen... ?

    • Das ist falsch. col-xs-2 bedeutet, es nimmt 2 von 12 Räumen auf xs-Bildschirme. Der code @Fernanda ist derzeit mit (col-xs-6) ist korrekt für die 2 Spalten auf dem Handy.
    • col-xs-2 - werden zwei Spalten, nur auf die xs-Geräte-(mobile)...dies bedeutet etwas anderes...ich sagte das gleiche!!
    InformationsquelleAutor Milind
Schreibe einen Kommentar