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)...

我希望我们现在处于同一浪潮^^