3つの列のバックグラウンドでブートストラップイメージが表示されない

Question

3つの列の背景にイメージを全幅で表示しようとしています。私はdivの3つの列をラップし、divの背景を置くと、それは起こるだろうが、それは表示されないと思った。 がhttp://www.bootply.com/BT0SWRh3aq

ここに私のコードです：

   <div id="bg-pink-data-points"> 
      <div class="col-md-4 col-xs-12"> 
       <h3>RESEARCH</h3> 
       <p>The systematic investigation into and study of materials and sources in order to establish facts and reach new conclusions</p> 
      </div> 
      <div class="col-md-4 col-xs-12"> 
       <h3>WRITE</h3> 
       <p>Mark (letters, words, or other symbols) on a surface, typically paper, with a pen, pencil, or similar implement.</p> 
      </div> 
      <div class="col-md-4 col-xs-12"> 
       <h3>DISCOVER</h3> 
       <p>In order to protect access to your account, we need to know who you are. Please provide details about the Primary cardmember as well as your Discover card</p> 
      </div> 
       </div> 

ここでCSSです：

#bg-pink-data-points { 
    background: url(https://www.planwallpaper.com/static/images/Wallpapers-for-Background-HD-Wallpaper-1080x607.jpg) no-repeat center center; 
    background-size: cover; 
} 

Answer 1

divの高さのために任意の値を割り当てられて取得されていない

は、ここに私のbootplyです。これを固定された高さに設定するか、CSSをわずかに変更して、rowやcol-xs-12のようなラッパークラスを追加することをお勧めします。

CSSの変更：

 

    #bg-pink-data-points { 
      background-image: url("https://www.planwallpaper.com/static/images/Wallpapers-for-Background-HD-Wallpaper-1080x607.jpg"); 
      background-size: cover; 
     } 

HTMLの変更：

 

    div class="row" id="bg-pink-data-points">