Mobile 移动设备上的引导：水平视图上的两列

在移动视图中，有没有一种方法可以在引导视图中，使用通常的col xs xx方法，在垂直视图中列出一列，在手机旋转视图中，在水平视图中列出两列

我找不到办法。

---

谢谢。

列断点基于设备视口（以像素为单位）。您可以使用引导生成器、less、scss或harder修改此断点，并对引导核心css进行黑客攻击。您还可以使用更少的/scs生成其他断点

---

您还可以使用jquery“on-orientationchange”进行一些魔术，并在视口宽度大于视口高度时切换一些类

默认情况下，引导程序具有以下配置：

< 768px   = -xs- prefix
>= 768px  = -sm- prefix
>= 992px  = -md- prefix
>= 1200px  = -lg- prefix

实现你所期望的目标

例如，您可以将

@screen sm min

更改为480px，以将带有

-xs-

前缀的垂直设备和带有

-sm-

前缀的水平设备作为目标

---

请注意，这样你就失去了瞄准肖像平板电脑的可能性。

多亏了cakebake的建议，这是一个有效的例子

左边
正确的
$（窗口）.on（“方向更改”，函数（事件）{
$（“#方向”）.text（“此设备处于”+event.orientation+“模式！”）；
如果（事件方向==“横向”）
{
$（“#extra[id^='switch']）；
$（“#extra[id^='switch']”）addClass（“col-xs-6”）；
}
else if（事件方向==“纵向”）
{
$（“#extra[id^='switch']）；
$（“#extra[id^='switch']”）addClass（“col-xs-12”）；
}
});
$（窗口）.orientationchange（）；

谢谢您的建议。下面我发布了一个工作示例，以帮助其他人解决同一问题。

@screen-sm-min
@screen-md-min
@screen-lg-min

<div class="container">
    <div class="row" id="extra">
        <div id="switch1" class="col-xs-12">
            left
        </div>
        <div id="switch2" class="col-xs-12">
            right
        </div>
    </div>
</div>
<div id="orientation"></div>

$(window).on("orientationchange",function(event){
    $( "#orientation" ).text( "This device is in " + event.orientation + " mode!" );
    if(event.orientation=="landscape")
    {
        $("#extra [id^='switch']").removeClass( "col-xs-12" );
        $("#extra [id^='switch']").addClass( "col-xs-6" );
    }
    else if(event.orientation=="portrait")
    {
        $("#extra [id^='switch']").removeClass( "col-xs-6" );
        $("#extra [id^='switch']").addClass( "col-xs-12" );
    }
});
$( window ).orientationchange();