css - 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 在这种情况下 - 720px x 1280px)在垂直方向和水平方向时执行 col-xs-已执行 col-sm-，但它停留在 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

Bootstrap 中媒体查询的默认值是:

• col-lg-; @screen-lg: 1200px; @media(最小宽度:@screen-lg){}
• col-md-; @screen-md: 992px; @media(最小宽度:@screen-md){}
• col-sm-; @screen-sm: 768px; @media(最小宽度:@screen-sm){}
• col-xs-; @screen-xs: 480px; @media(最小宽度:@screen-xs){}

这意味着在 Samsung Galaxy S3 手机(具有 1280x720px 显示屏)上您将拥有:

• 在垂直位置:col-xs-(因为:@screen-xs < 720px < @screen-sm)
• 在水平位置:col-lg-(因为:@screen-lg < 1280px)

祝你好运!