移动设备上的引导程序：水平视图上的两列答案

【问题标题】：Bootstrap on mobile: two column on horizontal view移动设备上的引导程序：水平视图上的两列
【发布时间】：2015-05-09 06:03:57
【问题描述】：

有没有办法在引导程序中，在移动视图中，使用通常的 col-xs-xx 方法在垂直视图上列出一列，在手机旋转时，在水平视图上列出两列？

我找不到方法。谢谢。

【问题讨论】：

标签： mobile twitter-bootstrap-3

【解决方案1】：

列断点基于您的设备视口（以像素为单位）。您可以使用引导程序生成器修改此断点，更少，scss 或更难破解引导程序核心 css。您还可以使用 less/scss 生成额外的断点。

您还可以使用 jquery “onorientationchange” 做一些魔术，并在视口宽度大于视口高度时切换某些类。 ;)

【讨论】：

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

【解决方案2】：

感谢 cakebake 的建议，这是一个工作示例

https://jsfiddle.net/mud16c60/

<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();

【讨论】：

【解决方案3】：

默认情况下，Bootrap 具有以下配置：

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

使用此标准，Bootstrap 将移动纵向和横向都视为-xs- 设备。

您可以覆盖（使用 less 或 sass/scss）此变量：

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

实现你所期待的。

例如，您可以将 @screen-sm-min 更改为 480px 以定位带有 -xs- 前缀的垂直设备和带有 -sm- 前缀的水平设备。

请注意，这样您就失去了定位纵向平板电脑的可能性。

【讨论】：