无法让自定义媒体查询与引导主题一起使用答案

【问题标题】：Can't get custom media queries to work with bootstrap theme无法让自定义媒体查询与引导主题一起使用
【发布时间】：2015-10-11 07:41:39
【问题描述】：

我正在使用 Twitter Bootstrap 布局的主题版本来构建网站，我的所有自定义 CSS 都运行良好，除了 @media 查询。谁能看到我做错了什么？

HTML：

<section id="lessons" class="bg-black no-padding lesson-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-4">
        <img src="/clients/wt/images/lesson_01.jpg" alt="Image 1" />
        <img src="/clients/wt/images/lesson_03.jpg" alt="Image 3" />
      </div>
      <div class="col-lg-4 hideable">
        <img src="/clients/wt/images/lesson_02.jpg" alt="Image 2" />
        <img src="/clients/wt/images/lesson_04.jpg" alt="Image 4" />
      </div>
      <div class="col-lg-4 text-right expandable">
        <h3>Content Title</h3>
        <p>More content here</p>
      </div>
    </div>
  </div>
</section>

CSS：

@media screen and (max-width: 900px) {
  .hideable {
    display: none;
  }
  .expandable {
    width: 66.6666667%;
  }
}

这里的目标是 .hideable 列将消失，而 .expandable 列将填满它的位置。如果您想查看完整的开发站点，请访问http://tentenstudios.com/clients/wt/。如果您调整窗口大小，您会看到“课程”区域中的中间照片不会消失。

【问题讨论】：

似乎对我有用。我认为您可能想将其应用于更高的最大宽度？大概 1200px 左右？
啊，你说得对——我不知道我需要将最大宽度设置得那么高！

标签： html css twitter-bootstrap media-queries

【解决方案1】：

Bootstrap CSS 包含：

@media (min-width: 1200px)
.col-lg-4 {
  width: 33.33333333%;
}

和

@media (min-width: 1200px)
.col-lg-1, .col-lg-10, .col-lg-11,
.col-lg-12, .col-lg-2, .col-lg-3,
.col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9 {
  float: left;
}

要实现我认为您正在寻找的内容，您必须将这两种样式都保持在 1200 像素的最小宽度之外。所以这样的事情应该可以工作：

@media screen and (max-width: 1200px) {
  .col-lg-4 {
     width: 33.33333333%;
     float: left;
  }
  .hideable {
    display: none;
  }
  .expandable {
    width: 66.6666667%;
  }
}

【讨论】：