css - 如果 bootstrap col 不是水平的，则更改 css

Question

我有一个简单的 Bootstrap 布局

<div class="container-fluid">
    <div class="row">
         <div class="col-sm-8">
              <div class="upper"></div>
         </div>
         <div class="col-sm-4">
              <div class="lower"></div>
         </div>
    </div>
</div>

CSS

.upper {
height: 100%;
width: 100%;
}

.lower {
height: 100%;
width: 100%;
}

如果屏幕是 sm，上面的 div 将在上面，另一个在下面。每个填充 100% 宽度和高度。但是，如果屏幕是 sm，它希望 upper 仅具有 80% 高度。有什么方法可以在 Bootstrap 中解决这个问题吗？或者其他一些使用 jquery 的聪明方法。

Answer 1

你可以在 sm 之后的每个 div 中添加 xs 类，或者你也可以使用媒体查询来完成

<div class="container-fluid">
    <div class="row">
         <div class="col-sm-8 col-xs-8">
              <div class="upper"></div>
         </div>
         <div class="col-sm-4 col-xs-4">
              <div class="lower"></div>
         </div>
    </div>
</div>

或

@media only screen and (max-width: 768px) {
.upper {
height: 80%;
width: 80%;
}

.lower {
height: 80%;
width: 80%;
}
}