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文件。 -dontwarn android.support.v7.** -keep class android.support.v7.** { *; } -keep interface android.support.v7.** { *; } # support design -dontwarn android.support.design.** -keep class android.support.design.** { *; } -keep interface android.support.design.** { *; } -keep public class android.support.design.R$* { *; } -dontwarn android.support.**类与.col-xs-6类的区别仅在于一个属性：

.col-xs-12

因此，当屏幕宽度为480像素或更小时，覆盖.col-xs-12 { width: 100%; } .col-xs-6 { width: 50%; }属性就足够了：

＆＃13;

width

＆＃13;

@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; }

＆＃13;

Bootstrap 3 - 屏幕分辨率为480px或更低的不同网格

1 个答案: