我怎樣才能得到背景顯示在底部兩行

我的容器中有三行。我想在底部兩行應用一個背景。我不想要第一行的背景。我想使用一個背景ac我知道我錯過了一些東西，但不知道在代碼中編輯它。我的背景只顯示在第一行的列中。我怎樣才能得到背景顯示在底部兩行

我不想對每個需要背景的.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;

}

來源

2016-05-02 user3075987

如果你想對所有行的背景使用類和重複行

/* 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>

來源

2016-05-02 16:42:31 scaisEdge

應用的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中，並且不會應用後臺。我不知道這是否是有意的。

來源

2016-05-02 16:45:47 hungerstar

這不是故意的。我希望背景適用於底部兩行。我不希望背景適用於加入我們訪問的行： – user3075987

我不認爲你想將'h2'包裝在'.row'中。 '.row'類應該用於網格類（'.col-x-x'）。它具有負邊距，可調整應用於列類的填充。如果你打開'h2'並將'col-x-x'元素包裝在'.row'中，我的原始解決方案應該可以正常工作。它看起來像這樣[Bootply]（http://www.bootply.com/5cmQVk9sBd）。否則，你會希望使用CSS選擇器來獲得更多的靈活性，或者對每個需要背景的'.row'應用一個類。 – hungerstar

我無法將類應用於需要背景的每個.row。重點是指定一次背景，並將其應用於底部的兩行。 – user3075987

解決方法很簡單 - 你只需要在你的CSS代碼一行插入，所以代碼看起來像：

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

就是這樣： - ）

來源

2016-05-02 17:05:28

我怎樣才能得到背景顯示在底部兩行

回答

相關問題