html - Bootstrap 3 处理 xs 和 sm 之间的差异

Question

我将 col-xs-* 用于纵向移动设备，但天真地认为 col-sm-* 用于横向移动设备，然而，根据第一个答案 from this question ，其实不然。

所以我的问题是如何有效地使用横向手机的 col 结构？

我的想法是:

• 垂直移动设备上的 col-xs-12
• 横向移动设备上的 col-sm-6(因为它明显更宽)

但是，因为 sm 并不是我最初想象的那样，所以在不更改核心 bootstrap CSS 的情况下这可能吗？

以 iPhone 6+ 为例，它的横向宽度为 736px，仍然被认为在 xs 的范围内。

因此，此视口(viewport)中的任何 col-xs-12 看起来都非常巨大，这使得事情看起来很糟糕。

理论上我可以将 sm 断点更改为低于当前值 768，但是有更好的方法吗？

也许在 xs 和 sm 之间添加一个类？

更新

我还从另一个问题中找到了这个片段，它有潜力。

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .col-xsl-6{ width: 50%; }
}

Answer 1

最简单的方法是使用 LESS 并更改 sm 断点:

@import "bootstrap.less";
@screen-sm-min: 736px;

http://www.codeply.com/go/g3Qtejhoui

您还可以generate a custom CSS build更改相同的 @screen-sm-min 变量。