Question

我的容器中有三行。我想在底部的两行中应用一个背景。我不想要第一行的背景。我想使用一个背景交流，我知道我遗漏了一些东西，但无法弄清楚代码在哪里编辑它。我的背景只出现在第一行的列中。

我不想将类应用于需要背景的每个.row。重点是指定背景一次，并将其应用于两个底行。

这是我的bootply： http://www.bootply.com/X5WsoQbuM1

这是我的HTML：

<div class="content-section-d">
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h2>How many apples can you eat?</h2>
                <p>
                    The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple. I.</p>
        </div>
    </div>
        <h2>Join us to pick the apples:</h2>
            <div class="row centered-text" id="backgroundazul">
            <div class="col-md-4 col-xs-12">
                <h3>4,000,000+</h3>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>1,500,000+</h3>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>150,000+</h3>
            </div>
                </div>
             <div class="row">
            <div class="col-md-4 col-xs-12">
                <h3>68,000+</h3>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>2,000+</h3>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>3 years</h3>
            </div>
                </div>

               </div>
    <!-- /.container -->

这是我的CSS：

#backgroundazul {
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
padding: 0 0 50px 0;

}

Answer 1

如果您希望所有行的背景使用一个类并重复行

/* CSS used here will be applied after bootstrap.css */

.backgroundazul {
    background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
   padding: 0 0 50px 0;
}


    <div class="container">

            <div class="row">
                <h2>Join us to access:</h2>
            </div>
            <div class="row centered-text backgroundazul " >
                <hr class="section-heading-spacer">
            <div class="col-md-4 col-xs-12">
                <h3>4,000,000+</h3>
              <p>Apples</p>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>1,500,000+</h3>
                <p>Oranges</p>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>150,000+</h3>
                <p>Mangos</p>
            </div>
             </div>
            <div class="row centered-text backgroundazul " >
            <div class="col-md-4 col-xs-12">
                <h3>68,000+</h3>
                <p>Bananas</p>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>2,000+</h3>
                <p>Honeydew</p>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>3 years</h3>
                <p>Blueberries</p>
            </div>
                </div>

Answer 2

将id应用于.container元素，然后将背景应用于.row元素。

<div id="backgroundazul" class="container">
    <div class="row">
        <!-- ... -->
    </div>
    <div class="row">
        <!-- ... -->
    </div>
</div>

#backgroundazul .row {
    background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
    padding: 0 0 50px 0;
}

更新了Bootply。请注意，您没有将第二行数据包装在.row中，并且不会应用背景。我不知道这是否是故意的。

Answer 3

解决方案很简单 - 你只需要在你的css代码中插入一行，所以代码如下：

＆＃13;

#backgroundazul{
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
background-size: cover;
padding: 0 0 50px 0;
}

＆＃13;

这就是它： - ）

如何在底部两行显示背景

3 个答案: