Question

假设我有一个div，我已经应用了“容器流体”。

当视口低于1200px（大型设备）时，如何将其更改为“容器”？

我知道我可以复制代码并使用类似的东西：

<div class="container-fluid hidden-md">...content here...</div>
<div class="container hidden-lg">...content here...</div>

但这感觉并不好。还有其他办法吗？

Answer 1

您可以将自定义类和媒体查询添加到您自己的样式表（在引导程序后加载），所以类似

.customcontainer {
  border: 1px solid red;
}
@media(max-width:1200px) {
  .customcontainer {
    max-width: 300px; //or whatever you want max width to be
  }
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid customcontainer">...content here...</div>

我刚刚添加了边框和低px宽度以用于演示目的

Twitter Bootstrap - 在lg设备上使用“容器流体”的语义方式

1 个答案: