Bootstrap 480x320 320x480

Question

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-4"> 
     Test testTest test <br /> 
     test <br /> 
     test test test 
    </div> 
    <div class="col-xs-4"> 
     Test test testtesttest<br /> 
     test test<br /> 
     test test test 
    </div> 
    <div class="col-xs-4"> 
     Test test testTest test<br /> 
     test testtesttest<br /> 
     test test test 
    </div> 
    </div> 
</div> 

爲什麼bootstrap XS不會被分爲480x320和320x480分辨率？

我在480x320上的例子很好地顯示，但是在320x480中它被擠壓。

如果我刪除class col-xs-4，則兩個分辨率中的每個框都是換行。

對於480x320分辨率的盒子來說，最好的方式是在一行中，320x480分辨率的盒子是以新的方式排列的。

Answer 1

只需添加另一個類山坳，並給它一些全寬CSS把這個在你的CSS

@media screen and (max-width: 320px){ 
    .col-tiny-12 {float:none; width:100%;} 
} 

和你的HTML看起來像

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-4 col-tiny-12"> 
     Test testTest test <br /> 
     test <br /> 
     test test test 
    </div> 
    <div class="col-xs-4 col-tiny-12"> 
     Test test testtesttest<br /> 
     test test<br /> 
     test test test 
    </div> 
    <div class="col-xs-4 col-tiny-12"> 
     Test test testTest test<br /> 
     test testtesttest<br /> 
     test test test 
    </div> 
    </div> 
</div>