Question

我正在尝试在三列背景中显示图像的全宽。我想如果我把三个列包裹在div中并在div上放置背景，它就会发生，而不是在整个屏幕上显示背景。我如何制作它只是在hr线以下的背景中显示。

所以我不希望背景显示在以下部分中：什么是苹果？苹果树（Malus domestica）是玫瑰家族的落叶树，以其甜美的果实和苹果而闻名。

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

这是我的html：

     <div class="content-section-a">

        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2>What is an Apple?</h2>
                    <p>The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>
                    <hr class="section-heading-spacer">
                    <div class="clearfix"></div>
                    </div>
              <div class="row" id="bg-pink-data-points">  
              <div class="col-md-4 col-xs-12">
                    <h3>LADY</h3>
                    <p>One of the oldest known varieties, this tiny apple is said to have gotten its name because women would keep them in their purses to sniff when they encountered bad odors.</p>
                </div>
                <div class="col-md-4 col-xs-12">
                    <h3>GRANNY SMITH</h3>
                    <p>The Baldwin was among the most popular American apples until 1934, when a freeze wiped out most of its trees.</p>
                </div>
                <div class="col-md-4 col-xs-12">
                    <h3>GOLDEN DELICIOUS</h3>
                    <p>This heirloom hails from Denmark, but in the United States, it's grown almost exclusively in Sonoma County, CA, where it's celebrated with an annual festival. </p>
                </div>
                    </div>
        </div>
        <!-- /.container -->

    </div></div>

Here's a CSS:

    #bg-pink-data-points {
            background-image: url("http://10steps.sg/wp-content/uploads//2012/11/White-christmas-light-background.jpg");
        }

.content-section-a {
    padding: 50px 0;
}

Answer 1

您的HTML结构.row似乎在另一个.row中受到轻微干扰，您可以尝试这样做：

<div class="content-section-a">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2>What is an Apple?</h2>
                    <p>The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>
                    <hr class="section-heading-spacer">
                    <div class="clearfix"></div>
                </div>                
            </div>
            <div class="row" id="bg-pink-data-points">
                <div class="col-md-4 col-xs-12">
                    <h3>LADY</h3>
                    <p>One of the oldest known varieties, this tiny apple is said to have gotten its name because women would keep them in their purses to sniff when they encountered bad odors.</p>
                </div>
                <div class="col-md-4 col-xs-12">
                    <h3>GRANNY SMITH</h3>
                    <p>The Baldwin was among the most popular American apples until 1934, when a freeze wiped out most of its trees.</p>
                </div>
                <div class="col-md-4 col-xs-12">
                    <h3>GOLDEN DELICIOUS</h3>
                    <p>This heirloom hails from Denmark, but in the United States, it's grown almost exclusively in Sonoma County, CA, where it's celebrated with an annual festival. </p>
                </div>
            </div>
        </div>
        <!-- /.container -->
    </div>

演示网址 http://www.bootply.com/0m5JJ6pMM0

如果您想要使用背景进行扩展，您还可以使用为背景#bg-pink-data-points设置样式的相同CSS属性：

#bg-pink-data-points {
    background-image: url("http://10steps.sg/wp-content/uploads//2012/11/White-christmas-light-background.jpg");
    padding: 10px;
}

你也可以玩更多选项。 演示网址 http://www.bootply.com/Poi6HlXOa8

Answer 2

请将.col-lg-12连接到一行以设置正确的布局..

<div class="content-section-a">

    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h2>What is an Apple?</h2>
                <p>The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>
                <hr class="section-heading-spacer">
           </div>
       </div>
       <div class="row" id="bg-pink-data-points">  
           <div class="col-md-4 col-xs-12">
               <h3>LADY</h3>
                <p>One of the oldest known varieties, this tiny apple is said to have gotten its name because women would keep them in their purses to sniff when they encountered bad odors.</p>
           </div>
           <div class="col-md-4 col-xs-12">
               <h3>GRANNY SMITH</h3>
               <p>The Baldwin was among the most popular American apples until 1934, when a freeze wiped out most of its trees.</p>
           </div>
           <div class="col-md-4 col-xs-12">
               <h3>GOLDEN DELICIOUS</h3>
               <p>This heirloom hails from Denmark, but in the United States, it's grown almost exclusively in Sonoma County, CA, where it's celebrated with an annual festival. </p>
           </div>
      </div>
      <!-- /.container -->

Answer 3

删除User (Uid, Rid, Aid) composite PK上的float: left;或用<div class="col-lg-12">覆盖

不要在整行显示背景图像

3 个答案: