Bootstrap CSS - 列类错误答案

【问题标题】：Bootstrap CSS - column class errorBootstrap CSS - 列类错误
【发布时间】：2015-01-17 03:57:02
【问题描述】：

我的页面有一个静态背景图像，文本在其“顶部”的图层上滚动。在中型和大型设备上，我希望文本显示在其行的右侧以允许看到背景图像 - 所以我为较大的设备添加了左填充。在较小的设备上，文本可以一直跨越。

我已经设置了大型和小型的代码（如果没有其他 col 类，小型设备的代码可以工作）。当我为更大的设备添加一个类时，它被忽略了。

我不明白为什么下面的 CSS 代码不起作用。

CSS：

.homeBGimg {
    padding: 100px 0 100px;
    color: #fff;
    position: relative;
    background-image: url(../images/image_1900x1200.jpg);
}
.homeBGimg .even {
     background-image: url(../images/image_1900x1200.jpg); 
} 
.homeBGimg h1 { 
    color: #000; 
}

/* CODE THAT'S DRIVING ME INSANE */

.homeBGimg .col-sm-12 {padding-left: 30px;}
.homeBGimg .col-md-12 {padding-left: 600px;}

/* END OF INSANITY */

HTML：

<section class="homeBGimg">
    <div class="container">    
        <div class="row">
            <div class="col-sm-12 col-md-12">
                <h1>Are you prepared for retirement?</h1> 
                <h2>Find out at a complimentary retirement workshop near you.</h2>
                <p>
                    <a href="what-you-should-know.html#videos" 
                    class="btn btn-outline-inverse btn-lg"  
                    data-toggle="tooltip" data-placement="top" 
                    title="Learn More">
                        Learn More
                    </a>
                </p>
            </div>
        </div>
    </div>
</section>

【问题讨论】：

带有 Bootstrap 的网格系统是在媒体查询中设置的，如果您想创建一个响应式站点，您还必须使用它，否则任何不在媒体查询中的样式都将应用于所有设备宽度。另外，调整网格也不是什么好办法，另想办法
当一个元素有这个col-sm-12 col-md-12 那么它会应用哪一个呢？最后一个。只有在这些媒体查询中，顺便说一句，像 col-sm-12 和 col-md-12 这样的冗余类是一样的，它们会起作用，但我永远不会为此调整网格系统。查看 GetBootstrap.com 上的 html 使用的功能或功能，还有示例，全宽项目不需要网格
请参阅 github.com/twbs/bootlint/wiki/E029 了解为什么 col-sm-12 col-md-12 是多余的。

标签： css twitter-bootstrap

【解决方案1】：

这是因为您尝试使用两个不同的类为同时具有这两个类的 div 设置 CSS 样式。 你不能这样做。好吧，你可以，但你会遇到你遇到的问题。

使用 HTML 和 CSS 时，您需要记住它们是从上到下阅读的，就像阅读任何文档一样。因此，当浏览器读取 CSS 文件时，它会按照给定的顺序读取“规则”，并按该顺序应用它们。

所以首先你告诉它这样做：

.homeBGimg .col-sm-12 {padding-left: 30px;}

然后你告诉它这样做：

.homeBGimg .col-md-12 {padding-left: 600px;}

对于一个看起来像这样的元素：

<div class="col-sm-12 col-md-12">

要记住的另一件事：即使 Bootstrap 类在技术上并未应用于该特定宽度，该类仍然存在，并且任何与其相关的 CSS 仍将被应用。

查看此 FIDDLE 以了解发生了什么。在其中，我使用您遇到的每个 CSS 语句为您定位的项目应用了一个边框。第一个应用蓝色边框，第二个应用橙色边框。请注意只有橙色的适用于任何视口宽度？这是因为应用橙色边框的规则在应用蓝色边框的规则之后，并根据您完成 DOM 定位的方式应用于同一元素，因此最先的规则被覆盖。

要做你想做的事，你需要考虑使用 CSS 中称为 media queries 的东西，或者使用 jQuery 的解决方案。

查看其他 FIDDLE 示例，了解如何使用媒体查询执行此操作以及更好地定位。

HTML：

<section class="homeBGimg">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12 foo">
                 <h1>Are you prepared for retirement?</h1> 
                 <h2>Find out at a complimentary retirement workshop near you.</h2>

                <p> <a href="what-you-should-know.html#videos" class="btn btn-outline-inverse btn-lg" data-toggle="tooltip" data-placement="top" title="Learn More">Learn More</a>

                </p>
            </div>
        </div>
    </div>
</section>

CSS：

.homeBGimg {
    padding: 100px 0 100px;
    color: #fff;
    position: relative;
    background-image: url(http://placehold.it/1920x1200);
}
.homeBGimg .even {
    background-image: url(http://placehold.it/1920x1200);
}
.homeBGimg h1 {
    color: #000;
}
@media screen and (max-width: 992px) {
    .homeBGimg .row div {
        padding-left: 600px;
        border: 1px solid orange;
    }
}
@media screen and (max-width: 768px) {
    .homeBGimg .row div {
        padding-left: 30px;
        border: 1px solid blue;
    }
}

我希望这能让你走上正确的道路。

【讨论】：

谢谢你！！！！！！！！！显然我需要做一些学习！当你不知道你不知道的事情时很糟糕！欣赏！
没问题。发展是你一直在学习的东西，你永远不会停止，所以尽量不要因为不知道某些事情而对自己苛刻。 :)
@DesignGal 如果发布的任何一个答案对您有帮助，请将您认为对这个问题最好的答案标记为正确答案。

【解决方案2】：

你必须替换这一行

 <div class="col-sm-12 col-md-12">

用这个：

<div class="col-sm-12 col-md-12 col-lg-6 col-lg-offset-6">

你根本不需要那个填充。此外，它不起作用（正如您已经注意到的那样。相反，您需要使用 Bootstrap 网格。在您的特定情况下，我在大视图上偏移列并在小屏幕上显示全宽。仅供参考，我已创建Bootply 供您查看

请务必查看this section of Bootstrap 文档，该文档教您如何处理网格和偏移列。

【讨论】：