html - 在较小的屏幕中 Bootstrap 垂直定位到水平

Question

我使用 bootstrap 进行响应式设计。

这是计算机 View :

这是在 ipad 上的 View :

当我换成 iPad 时，是否有可能以某种方式将这些垂直菜单框更改为水平状态，如下所示:

我使用这个类:

<div class="row">
    <div class="col-lg-4">MENU</div>
    <div class="col-lg-8">LIST</div>
</div>

感谢您的任何建议!

Answer 1

看这里:http://getbootstrap.com/css/#responsive-utilities 文档

col-lg 用于大型设备

对于超小型设备:

<div class="row">
    <div class="col-xs-4">MENU</div>
    <div class="col-xs-8">LIST</div>
</div>

对于小型设备:

<div class="row">
    <div class="col-sm-4">MENU</div>
    <div class="col-sm-8">LIST</div>
</div>

更新:我不知道 IPAD 是什么设备(超小型、小型或中型设备，所以在我的示例中它会很小..

<div class="row">
    <div class="col-md-4">MENU
         <div class="col-sm-4 col-md-12">acccount</div>
         <div class="col-sm-4 col-md-12">transact</div>
         <div class="col-sm-4 col-md-12">details</div>
    </div>
    <div class="col-md-8">LIST</div>
</div>

当你看到 <div class="col-sm-4 col-md-12">acccount</div> :

此 div 在小型设备上为 4/12，在中型设备上为 12/12(col-md-4)...

我希望我们现在在同一个浪潮中^^