css - Bootstrap 3 - 屏幕分辨率为 480 像素或更小的不同网格

Question

我通过 bootstrap 3 有标准的 4 列网格:

<div class="row">
    <div class="col-sm-3 col-xs-6">
        col1
    </div>
    <div class="col-sm-3 col-xs-6">
        col2
    </div>
    <div class="col-sm-3 col-xs-6">
        col3
    </div>
    <div class="col-sm-3 col-xs-6">
        col4
    </div>
</div>

在大屏幕上它显示为 4 列，在 767px 宽度时它变成 2 列。这一切都很好。我想要实现的是使它成为接近 480px 或更低分辨率的一列。这可以通过 Bootstrap 完成，还是我应该正确自定义 css？

谢谢

Answer 1

让我们探索 bootstrap.css文件。 .col-xs-6 类与 .col-xs-12 类的区别仅在于一个属性:

.col-xs-12 { 
  width: 100%;
}
.col-xs-6 {
  width: 50%;
}

因此当屏幕宽度为 480 像素或更小时，覆盖 width 属性就足够了:

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

/* The heart of the matter */
@media (max-width: 480px) {
  .col-xs-6 {
    width: 100% !important;
  }
}

/* Decorations */
.col-xs-6:nth-child(1) { background: #9cf; }
.col-xs-6:nth-child(2) { background: #c9f; }
.col-xs-6:nth-child(3) { background: #f9c; }
.col-xs-6:nth-child(4) { background: #9fc; }

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-xs-6">
      col1
    </div>
    <div class="col-sm-3 col-xs-6">
      col2
    </div>
    <div class="col-sm-3 col-xs-6">
      col3
    </div>
    <div class="col-sm-3 col-xs-6">
      col4
    </div>
  </div>
</div>