Bootstrap 3 with Less：如何自定义媒体查询

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。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;