Bootstrap CSS - 第 class 列错误

Question

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

我已经为大型设备和小型设备设置了代码（如果没有其他列 classes，小型设备的代码就可以工作）。当我为较大的设备添加 class 时，它会被忽略。

我不明白为什么以下 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>

Answer 1

你必须替换这一行

 <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 教您如何处理网格和偏移列的文档。

Answer 2

这是因为您正尝试使用两种不同的 class 来设置 CSS 样式，而 div 具有这两种样式。 你不能那样做。好吧，你可以，但是你会运行遇到你遇到的问题。

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

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

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

然后你告诉它这样做：

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

对于如下所示的元素：

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

另一件要记住的事情：即使 Bootstrap class 在技术上并未应用于该特定宽度，class 仍然存在，并且 任何 CSS 绑定到它仍然会被应用。

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

要执行您想要的操作，您需要研究使用 CSS 中所谓的 media queries，或者使用 jQuery.[=18= 的解决方案]

查看其他 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;
    }
}

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

Bootstrap CSS - 第 class 列错误

Bootstrap CSS - column class error

css

twitter-bootstrap