css - 基于列的 Bootstrap 条件查询

Question

我正在使用 bootstrap 3.x 创建响应式网站。当屏幕尺寸为 col-xs-12 时，我想设置一个 -20px 的 margin-left，当它的尺寸为 col-md-3、col-sm-4 和 col-lg-2 时，我想要一个 margin-left 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 元素处于您想要的配置时激活。媒体查询仅适用于浏览器尺寸，因此您的媒体查询只能在浏览器达到您想要的尺寸时激活 - 以生成您想要的布局。