Question

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

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/看到它。如果你调整窗口大小，你会看到＆＃34;课程＆＃34;中的中间照片。区域不会消失。

Answer 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;
}

为了实现我认为您正在寻找的东西，您必须保持这些样式超出最小宽度1200px。所以这样的事情应该有效：

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

无法获得自定义媒体查询以使用引导主题

1 个答案: