Bootstrap 和手机定位 - 表单按钮定位

Question

我正在尝试使用 Bootstrap 响应式布局网格来定位表单按钮。该代码部分如下所示：

<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3">
        <div class="form-actions">
            <input type="submit" name="update_cart" value="Update Totals" class="btn btn-block btn-plain" />
        </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
        <div class="form-actions">
            <input type="submit" name="empty_cart" value="Empty Cart" class="btn btn-block btn-plain btn-danger" />
        </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-6">
        <div class="form-actions">
            <input type="submit" name="next" value="Checkout" class="btn btn-block btn-plain pull-right btn-wide" />
        </div>   
      </div>    </div>

根据上面的代码，我希望在手机（三星 Galaxy S3 在这种情况下 - 720 像素 x 1280 像素）处于垂直方向并且手机处于水平方向以执行 col-sm- 时执行 col-xs-，但它留在col-xs-

我的 CSS 包含（基于 Boostrap 网格选项和 iPad/iPhone/SGS 分辨率）：

@media (max-width: 767px)
@media (min-width: 768px)
@media (min-width: 992px)
@media (min-width: 992px) and (max-width: 1199px)
@media (max-width: 1024px)
@media (max-width: 1280px)

任何线索为什么不根据手机方向/分辨率和grid options切换？

测试页面：http://www.bootply.com/121024

谢谢

Answer 1

正如在类似问题中的回答 https://stackoverflow.com/a/23462633/657926

您可以像这样添加特定于方向的样式：

@media (max-width: 768px) and (min-aspect-ratio: 13/9) { } // landscape 
@media (max-width: 768px) and (max-aspect-ratio: 13/9) { } // portrait.

Answer 2

Bootstrap 中媒体查询的默认值为 (http://getbootstrap.com/css/#grid)：

col-lg-; @screen-lg: >1200px 
col-md-; @screen-md: >992px 
col-sm-; @screen-sm: >768px 
col-xs-; @screen-xs: <768px

看起来在三星 Galaxy S3 手机上我有真正的“@media breakpoint”尺寸

Chrome:
360 x 567 when vertical
640 x 287 when horizontal

Android native browser:
360 x 615 when vertical
640 x 335 when horizontal

基于http://ryanve.com/lab/dimensions/

在这种情况下，我需要重新编译 Bootstrap，并将新的 @screen-xs 设置为 640px

Answer 3

Bootstrap 中媒体查询的默认值为：

• col-lg-; @screen-lg：1200像素； @media（最小宽度：@screen-lg）{}
• col-md-; @screen-md：992px； @media（最小宽度：@screen-md）{}
• col-sm-; @screen-sm：768px； @media（最小宽度：@screen-sm）{}
• col-xs-; @screen-xs：480像素； @media（最小宽度：@screen-xs）{}

这意味着在三星 Galaxy S3 手机（显示屏为 1280x720 像素）上，您将拥有：

• 在垂直位置：col-xs-（因为：@screen-xs
• 在水平位置：col-lg-（因为：@screen-lg

祝你好运！