css - 如何根据 768px 以下的屏幕尺寸制作 col-xs-12 和 col-xs-6

Question

我正在使用 Bootstrap 3。

对于我的一个网页，我想使用 col-xs-12对于 319px-544px和 col-xs-6对于 545px-768px ...但这显然是不可行的，因为col-xs-适用于一切<768px .

显然，这在 bootstrap 4 中得到了解决，但到目前为止，我的整个应用程序都是为 bootstrap 3 编写的。

很难在319px 处限制为相同的列格式和 767px .有什么办法吗？

Answer 1

这里有两种可能的实现方式:

方法#01:

1. 转到 Customizing Bootstrap页面。
2. 转到Media queries breakpoints部分。
3. 用您需要的值覆盖 @screen-sm 变量的默认值，即 545px。
4. 转到Download部分并按“编译和下载”按钮。

现在所有的 col-sm-* 网格将从 545px 而不是 768px 开始。

方法#02:

您需要在您的自定义 css 文件中覆盖 Bootstrap 样式。

@media (min-width: 545px) {
  .col-sm-6 {
    width: 50%;
  }
}

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

@media (min-width: 545px) {
  .col-sm-6 {
    width: 50%;
  }
}

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <div class="bg-info">
        Column 1
      </div>
    </div>
    <div class="col-xs-12 col-sm-6">
      <div class="bg-info">
        Column 2
      </div>
    </div>
  </div>
</div>