Bootstrap - Wie man Spalten horizontal in niedrigeren Auflösungen und vertikal wenn höher macht

Question

Ich habe eine Situation, in der ich Platten habe, die horizontal sein sollen, wenn die Breite der Seite klein ist (mobil) und vertikal, wenn die Breite breiter ist (Desktop). Wenn die Breite klein ist, können die Panels horizontal gescrollt werden. Etwas wie folgt aus:

Small (mobile): 

    ☐☐☐☐☐☐ 

Big (desktop): 

    ☐ 
    ☐ 
    ☐ 
    ☐ 
    ☐ 

Ich möchte die Platten haben eine feste Größe zu sein, wenn der Bildschirm kleiner ist (w: 267 h: 215) und größer (w: 324 h: auto). Ich habe versucht, das Rastersystem zu verwenden. Ich hatte Glück mit den Panels stapeln, aber alle Panels in einem Container zu passen, wenn der Bildschirm kleiner ist, ist sogar mit. Ich versuchte dies:

HTML

<div class="container panels"> 
    <div class="row"> 
    // col-xs-2 because 2 * 6 = 12 
    <div class="col-xs-2"></div> 
    // five more of these 
    </div> 
</div> 

CSS

.panels { 
    overflow-x: hidden; 
    white-space: nowrap; 
    // this makes the text within the panels go outside of the 
    // panel if it's really long 
} 

Bin ich dieses Recht nähern?

Answer 1

Es ist in der Regel umgekehrt, aber Sie können es erreichen, indem die Breite in Grossansicht Angabe:

<div class="container panels"> 
    <div class="row"> 
    <div lass="col-xs-2 col-lg-12"></div> 
    // five more of these 
    </div> 
</div> 

Answer 2

des Containers Stil overflow-x: hidden Einstellung und `white-space Entfernung: nowrap“ funktioniert der Trick

deklariert auch die Größe des Panels in einer Klasse löst das Größenproblem