Bootstrap 3 处理 xs 和 sm 之间的区别答案

【问题标题】：Bootstrap 3 dealing with difference between xs and smBootstrap 3 处理 xs 和 sm 之间的区别
【发布时间】：2017-01-11 23:26:31
【问题描述】：

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

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

我的想法是：

垂直移动设备上的 col-xs-12
横向移动设备上的 col-sm-6（因为它显然更宽）

但是，由于 sm 不是我最初想的那样，这是否可能在不更改核心引导 CSS 的情况下实现？

如果我们以 iPhone 6+ 为例，它的横向宽度是 736 像素，仍然被认为在 xs 的范围内。

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

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

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

更新

我也从另一个问题中找到了这个sn-p，很有潜力。

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

【问题讨论】：

您考虑过迁移到 BS-4 吗？
我已经考虑过了，但我还没有机会进入 Bootstrap 4 的 Alpha 版本。鉴于此，我不太了解每一个变化。如果它是我自己的项目，我会迁移，但不幸的是它即将结束，我认为其他开发人员不会欣赏所涉及的潜在测试。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

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

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

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

【讨论】：

考虑到我的情况，我觉得这是最合理的方法，但是我仍然坚持使用 CSS，所以会在适当的时候改变它......我真的需要进入预处理的 CSS .

【解决方案2】：

因此，考虑到其他人的建议，我决定按照建议创建一个 xsl col 类是有益的。

下面是 CSS。

/* Specifally landscape phones */
@media only screen and (min-width: 480px) and (max-width: 767px) {

.col-xsl-1, .col-xsl-2, .col-xsl-3, .col-xsl-4, .col-xsl-5, .col-xsl-6, .col-xsl-7, .col-xsl-8, .col-xsl-9, .col-xsl-10, .col-xsl-11, .col-xsl-12 {
        float: left;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
  }
  .col-xsl-12 {
    width: 100%;
  }
  .col-xsl-11 {
    width: 91.66666667%;
  }
  .col-xsl-10 {
    width: 83.33333333%;
  }
  .col-xsl-9 {
    width: 75%;
  }
  .col-xsl-8 {
    width: 66.66666667%;
  }
  .col-xsl-7 {
    width: 58.33333333%;
  }
  .col-xsl-6 {
    width: 50%;
  }
  .col-xsl-5 {
    width: 41.66666667%;
  }
  .col-xsl-4 {
    width: 33.33333333%;
  }
  .col-xsl-3 {
    width: 25%;
  }
  .col-xsl-2 {
    width: 16.66666667%;
  }
  .col-xsl-1 {
    width: 8.33333333%;
  }
  .col-xsl-pull-12 {
    right: 100%;
  }
  .col-xsl-pull-11 {
    right: 91.66666667%;
  }
  .col-xsl-pull-10 {
    right: 83.33333333%;
  }
  .col-xsl-pull-9 {
    right: 75%;
  }
  .col-xsl-pull-8 {
    right: 66.66666667%;
  }
  .col-xsl-pull-7 {
    right: 58.33333333%;
  }
  .col-xsl-pull-6 {
    right: 50%;
  }
  .col-xsl-pull-5 {
    right: 41.66666667%;
  }
  .col-xsl-pull-4 {
    right: 33.33333333%;
  }
  .col-xsl-pull-3 {
    right: 25%;
  }
  .col-xsl-pull-2 {
    right: 16.66666667%;
  }
  .col-xsl-pull-1 {
    right: 8.33333333%;
  }
  .col-xsl-pull-0 {
    right: auto;
  }
  .col-xsl-push-12 {
    left: 100%;
  }
  .col-xsl-push-11 {
    left: 91.66666667%;
  }
  .col-xsl-push-10 {
    left: 83.33333333%;
  }
  .col-xsl-push-9 {
    left: 75%;
  }
  .col-xsl-push-8 {
    left: 66.66666667%;
  }
  .col-xsl-push-7 {
    left: 58.33333333%;
  }
  .col-xsl-push-6 {
    left: 50%;
  }
  .col-xsl-push-5 {
    left: 41.66666667%;
  }
  .col-xsl-push-4 {
    left: 33.33333333%;
  }
  .col-xsl-push-3 {
    left: 25%;
  }
  .col-xsl-push-2 {
    left: 16.66666667%;
  }
  .col-xsl-push-1 {
    left: 8.33333333%;
  }
  .col-xsl-push-0 {
    left: auto;
  }
  .col-xsl-offset-12 {
    margin-left: 100%;
  }
  .col-xsl-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xsl-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xsl-offset-9 {
    margin-left: 75%;
  }
  .col-xsl-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xsl-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xsl-offset-6 {
    margin-left: 50%;
  }
  .col-xsl-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xsl-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xsl-offset-3 {
    margin-left: 25%;
  }
  .col-xsl-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xsl-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xsl-offset-0 {
    margin-left: 0;
  }
}

诚然，等待 Bootstrap 4 或使用 LESS CSS 可能更容易，但如果您正在寻找一个简单的、仅 CSS 的解决方案，那么这应该可以解决问题。

【讨论】：