无法让自定义媒体查询与 bootstrap 主题一起使用

Question

我正在使用 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/ 上找到。如果您调整 window 的大小，您会看到 "Lessons" 区域中的中间照片不会消失。

Answer 1

BootstrapCSS包含：

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

无法让自定义媒体查询与 bootstrap 主题一起使用

Can't get custom media queries to work with bootstrap theme

html

css

twitter-bootstrap

media-queries