Arka arka plan görüntüsünü arka arkaya gösterme

Question

Üç sütunun arka planında bir görüntüyü tam genişlikte göstermeye çalışıyorum. Sanırım üç sütunu bir div'a sardım ve div'a bir arka plan koyarsam, bunun yerine ekranın arka planını gösteriyordu. Bunu nasıl yapabilirim, o sadece hr çizgisinin altındaki arka planda gösterilir.

Arka planın bölümlerde gösterilmesini istemiyorum: Elma nedir? Elma ağacı (Malus domestica), elma, tatlı, sade meyveleriyle bilinen gül ailesinde yaprak döken bir ağaçtır.

 <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

başka .row yılında HTML Yapısı .row ufak rahatsızlık olduğu anlaşılıyor

, iyi bunu deneyebilirsiniz:

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

Demo URL:http://www.bootply.com/0m5JJ6pMM0

size Background ile oynamak istiyorsa genişletmek için, aynı CSS özelliğiyle de oynayabileceğiniz gibi, arka plan için de kullanılabilir (#bg-pink-data-points:

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

Bazı seçeneklerle de oynayabilirsiniz. Demo URL: http://www.bootply.com/Poi6HlXOa8

Answer 2

<div class="col-lg-12"> üzerinde float: left; kaldırma veya onun uygun ayarlamak için arka arkaya .col-lg-12 sarın Lütfen float: none;

Answer 3

eskisinin üzerine yazma: Burada http://www.bootply.com/BT0SWRh3aq

benim html var: Burada

benim bootply var düzen ..

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