css - 带有 Less : How to costume media query 的 Bootstrap 3

Question

我想为 xs、sm、md 和 lg 大小设置媒体查询样式，但似乎没有任何效果。我已尝试按照 Twitter Bootstrap 3: how to use media queries? 中提供的步骤进行操作.我想为 div 和图标设置不同大小和 padding 的样式，但是当我尝试按照说明使用媒体查询时，它们会不断覆盖所有大小的所有样式。

我在我的 costume.less 中使用了媒体查询，并针对不同的断点插入了我的样式更改。但无论我选择什么尺寸，最后一个都会覆盖所有尺寸。

我是否必须在 variable.less 中的变量中定义 CSS 样式，或者它是如何工作的？

在我的 costume.less 中编写示例代码:

//xs only
@media(max-width: @screen-xs-max) {
  .bg {
    background: red;
    padding: 0px;
  }
}
//sm only
@media(min-width: @screen-sm-min) and (max-width:@screen-sm-max) {
  .bg {
    background: blue;
  }
}
//small and up
@media(min-width: @screen-sm-min) {
  .bg {
    background: blue;
    padding: 15px;
  }
}
//md only
@media(min-width: @screen-md-min) and (max-width:@screen-md-max) {
  .bg {
    background: black;
    padding: 10px;
  }
}
//md and up
@media(min-width: @screen-md-min) {
  .bg {
    background: white;
    padding: 34px;
  }
}
//lg and up
@media(min-width: @screen-lg-min)  {}

Answer 1

从下面的代码中可以看出，我认为您的代码按预期工作。你应该将你的 custom.less 导入到 bootstrap.less 文件中:

@import "custom.less";

并编译bootstrap.less 文件。当你只编译custom.less文件时，你应该导入Bootstrap的variables.less文件。

请注意，当您出于某种原因使用 IE8 进行测试时，您应该首先阅读 IE8 issue with Twitter Bootstrap 3 .

@media (max-width: 767px) {
  .bg {
    background: red;
    padding: 0px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .bg {
    background: blue;
  }
}
@media (min-width: 768px) {
  .bg {
    background: blue;
    padding: 15px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .bg {
    background: black;
    padding: 10px;
  }
}
@media (min-width: 992px) {
  .bg {
    background: white;
    padding: 34px;
  }
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  @media (max-width: 767px) {
  .bg {
    background: red;
    padding: 0px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .bg {
    background: blue;
  }
}
@media (min-width: 768px) {
  .bg {
    background: blue;
    padding: 15px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .bg {
    background: black;
    padding: 10px;
  }
}
@media (min-width: 992px) {
  .bg {
    background: white;
    padding: 34px;
  }
}
</style>  

<div class="bg">test</div>