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>

为什么在自举XS中不分为480x320和320x480分辨率？

我在480x320上的示例很好地显示但是在320x480中它被挤压了。

如果删除col-xs-4类，则两个分辨率中的每个框都在新行中。

分辨率为480x320的盒子的最佳方法是在一行中，分辨率为320x480的盒子在新行中。

Answer 1

只需在col中添加另一个类，并将其放入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>