Twitter Bootstrap - 仅在 lg 设备上使用“container-fluid”的语义方式

【问题标题】：Twitter Bootstrap - semantic way using "container-fluid" just on lg devicesTwitter Bootstrap - 仅在 lg 设备上使用“container-fluid”的语义方式
【发布时间】：2015-04-24 23:21:53
【问题描述】：

假设我有一个应用了“container-fluid”的 div。

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

我知道我可以复制代码并使用如下内容：

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

但这感觉不太好。有没有其他方法可以做到这一点？

【问题讨论】：

标签： css twitter-bootstrap responsive-design media-queries

【解决方案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>

我只是为了演示目的添加了边框和低像素宽度

【讨论】：