如何防止背景色/图像出现在上一行（引导程序）

Question

我正在尝试将背景图像/颜色应用于标题为<div class="row-fluid promotion"> 。 但是，当我设置了这样的背景时，背景出现在标题为<div class="row-fluid products-row">我在此处看到了几篇类似问题的文章，但是他们的解决方案却没有似乎可以回答我的问题。

HTML / PHP

<div class="row-fluid products-row">
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 product-image-links" id="product-image-a">
            <a href="https://www.example.com/product-a/"><img src="http://www.example.com/wp-content/uploads/2017/03/product-a.jpg" height="200" width="200"></a>
            <h3 class="button"><a href="https://www.example.com/product-a/"><i class="fa fa-circle" aria-hidden="true"></i><span class="product-title">Product A</span><i class="fa fa-circle" aria-hidden="true"></i></a></h3>
        </div>

        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4" id="product-image-b">
            <a href="https://www.example.com/product-b/"><img src="http://www.example.com/wp-content/uploads/2017/03/product-b.jpg" height="200" width="200"></a>
            <h3 class="button"><a href="https://www.example.com/product-b/"><i class="fa fa-circle" aria-hidden="true"></i><span class="product-title">Product B</span><i class="fa fa-circle" aria-hidden="true"></i></a></h3>
        </div>

        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4" id="product-c">
            <a href="https://www.example.com/product-c/"><img src="http://www.example.com/wp-content/uploads/2017/03/product-c.jpg" height="200" width="200"></a>
            <h3 class="button"><a href="https://www.example.com/product-c/"><i class="fa fa-circle" aria-hidden="true"></i><span class="product-title">Product C</span><i class="fa fa-cirlce" aria-hidden="true"></i></a></h3>
        </div>
    </div>

    <div class="row-fluid promotion">
        <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
            <p>Text Text Text</p>
        </div>
        <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
            <p>Text Text Text</p>  
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
            <p>Text Text Text</p>
        </div>
    </div>

的CSS

.products-row{
    text-align: center;
}
#product-image-a{
    width: 29.3%;
    border-radius: 25px;
    list-style-type: none;
    background-color: green;
    background-image: url("http://www.example.com/wp-content/uploads/2017/03/pattern.png"); 
    padding-top: 25px;
    padding-bottom: 10px;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    margin-left: 2%;
    margin-right: 4%;
    margin-bottom: 50px;
}
#product-image-b{
    width: 29.3%;
    border-radius: 25px;
    list-style-type: none;
    background-color: green;
    background-image: url("http://www.example.com/wp-content/uploads/2017/03/pattern.png"); 
    padding-top: 25px;
    padding-bottom: 10px;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    margin-left: 2%;
    margin-right: 4%;
    margin-bottom: 50px;
}
#product-image-c{
    width: 29.3%;
    border-radius: 25px;
    list-style-type: none;
    background-color: green;
    background-image: url("http://www.example.com/wp-content/uploads/2017/03/pattern.png"); 
    padding-top: 25px;
    padding-bottom: 10px;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    margin-right: 2%;
    margin-bottom: 50px;
}
.button{
    background-color: green;
    font-weight: bold;
    margin-left: 30px;
    margin-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top-left-radius: 15px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 40px;
    -moz-box-shadow:    inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow:         inset 0 0 10px #000000; 
}
.product-title{
    padding-left: 20px;
    padding-right: 20px;    
}
.promotion{
    background: silver;
    height: 30px;
    background-image: url(http://www.example.com/wp-content/uploads/2017/03/pattern.png);
}

Answer 1

您可以通过链接两个类选择器来定位div：

.row-fluid.promotion {
  // your style
}

这样可以确保该规则仅适用于具有这两个类的div。

Answer 2

您需要将.row-fluid更改为.row 。

唯一具有-fluid Grid System类是.container-fluid 。 由于.row-fluid不存在， .row存在， .row .row-fluid无法清除列元素的浮点数（ .row做到）。

发生了什么，通常如何解决？

一行的背景向上移到前一行之后的原因是，您的行具有浮动的子元素。 发生这种情况时，父对象会崩溃并且没有高度。 父级折叠是因为浮动元素已从常规文档流中删除，并且不占用空间。

根本看不到灰色背景的唯一原因是因为您通过.promotion在.row-fluid上设置了30px的高度。 否则，该行也将崩溃，隐藏灰色背景。

在下面的代码段中，您看不到container .row元素的金色背景，因为它的子元素是浮动的并且不占用空间。

 * { box-sizing: border-box; } body { margin: 0; } .row { background-color: gold; } .row > div { float: left; width: 33.333%; min-height: 35px; border: 1px solid #444; } 

 <div class="row"> <div></div> <div></div> <div></div> </div> 

您需要纠正的是一个明确的解决方案。 通常，我会建议使用Micro Clearfix，但您使用的是Bootstrap 3，并且其行类内置有clearfix。clearfix创建新的块格式化上下文，因此父元素不会折叠，并且可以按预期应用背景和边框之类的东西。

在以下代码段中，我们从第一个示例中清除了浮动的子元素，以便父元素不会折叠，并且您可以看到金色背景。 这是.row所做的。

 * { box-sizing: border-box; } body { margin: 0; } .row { background-color: gold; } .row > div { float: left; width: 33.333%; min-height: 35px; border: 1px solid #444; } .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } 

 <div class="row cf"> <div></div> <div></div> <div></div> </div> 

Answer 3

在浏览了很多互联网以及各种试验和错误之后，我设法找到了解决方案。

对于遇到类似问题的任何人，请尝试通过CSS文件将clear: both插入到受影响的元素中。

阅读更多： W3Schools