Question

我正在使用bootstrap 3.x来创建响应式网站。当屏幕尺寸为col-xs-12时我想设置-20px的左边距，当它的尺寸为col-md-3时，col-sm-4和col-lg-2我想要一个边距左边0px。但是，无论屏幕大小如何，似乎始终应用col-xs-12 margin-left：-20px。如何调整此项以获得所需的结果。我的html和css与下面的顺序相同：

CSS：

.control.col-xs-12{
    margin-left:-20px;  
}

.control.col-sm-4,.control.col-md-3,.scontrol.col-lg-2{
    margin-left:0px;    
}

HTML：

<div class="control col-xs-12 col-lg-2 col-md-3 col-sm-4 col-lg-pull-10 col-md-pull-9 col-sm-pull-8 col-xs-pull-0 featcol">
    <img src="http://www.example.com/example.jpg">
</div>

Answer 1

虽然我还没有为您提交的代码提供解决方案，但是对问题的理解将使您能够理解（从而生成）解决方案......

由于HTML中包含col-xs-12类，因此无论浏览器大小如何，都会始终应用已定义的样式。

您需要做的是在浏览器尺寸发生变化时找到覆盖其样式的方法 - 这就是媒体查询的用武之地。

媒体查询允许在浏览器大小更改时动态更改CSS。

你对Bootstrap的一个额外问题（好吧，根本不是问题，因为它的性质）是它所拥有的列都是流体宽度 - 即它们使用百分比宽度 - 所以你不能说你想要媒体查询到当Bootstrap元素处于您想要的配置时激活。媒体查询仅适用于浏览器大小，因此您的媒体查询只能在浏览器达到所需大小时激活 - 才能生成所需的布局。

Answer 2

如其他答案所述，可以通过媒体查询解决此问题。由于XS定义为<768px，因此请更改CSS，如下所示：

@media (max-width: 767) {
  .control{
    margin-left:-20px;  
  }
}
@media (min-width: 768) {
  .control{
    margin-left:0px;  
  }
}

通常，除非您要覆盖其他样式，否则不需要将margin-left定义为0的第二部分。

基于列的Bootstrap条件查询

2 个答案: