我正在尝试使用 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
谢谢
最佳答案
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)
祝你好运!
关于css - Bootstrap 和手机方向 - 表单按钮定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22334742/