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

【问题标题】：Bootrap 3 with Less: How to costume media queryBootstrap 3 with Less：如何自定义媒体查询
【发布时间】：2015-01-14 23:37:31
【问题描述】：

我想为 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)  {}

【问题讨论】：

你需要分享一些我们可以提示的代码。只是“它不工作”没有帮助。
好的，我会试着解释这个问题。
@HeidiLil：伙计，每当您想为您的问题添加额外信息时，请通过编辑问题来完成，不要将其添加到答案部分。我现在已将您发布的内容作为答案添加到问题中。
@Harry 谢谢你，Harry，对不起。下次我会找到我的方式，按照你说的去做。海蒂莉尔

标签： css twitter-bootstrap less media-queries

【解决方案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>

【讨论】：