ジャンボトロンで隣り合った3つの背景写真を並び替えます

Question

3つの背景写真を隣り合わせに配置するためのコードは次のとおりです。ジャンボトロンに何も表示されない理由はわかりません。考えられる原因は何か、私には分かりますか？

<div class="jumbotron jumbotron-fluid" style=" margin-top: 90px; "> 
    <div class="container text-sm-center p-y-3"> 

     <div class="col-lg-3 col-md-3 col-sm-3" style=" background: url('./assets/img/glass.jpg'); background-repeat: no-repeat; background-size:contain "> 

     </div> 


     <div class="col-lg-6 col-md-6 col-sm-6" style="background: url('./assets/img/mhacks.jpg'); background-repeat: no-repeat; background-size:contain "> 

     </div> 


     <div class="col-lg-3 col-md-3 col-sm-3" style="background: url('./assets/img/rift.jpg'); background-repeat: no-repeat; background-size:contain "> 

     </div> 

    </div> 
</div> 

Answer 1

あなたはdivタグ内の任意のコンテンツを持っていないので、あなたがdiv要素で画像のみをしたい場合、あなたは次のように行うことができます：あなたはdivの内側の任意のコンテンツを持っていないので

<div class="jumbotron jumbotron-fluid" style=" margin-top: 90px; "> 
    <div class="container text-sm-center p-y-3"> 

     <div class="col-lg-3 col-md-3 col-sm-3"> 
      <img src="./assets/img/glass.jpg" class="img-responsive" style="width:100%; height:auto"/> 
     </div> 
     <div class="col-lg-6 col-md-6 col-sm-6"> 
      <img src="./assets/img/mhacks.jpg" class="img-responsive" style="width:100%; height:auto"/> 
     </div> 
     <div class="col-lg-3 col-md-3 col-sm-3"> 
      <img src="./assets/img/rift.jpg" class="img-responsive" style="width:100%; height:auto"/> 
     </div> 

    </div> 
</div> 

Answer 2

3つのdivの高さを設定していません。 背景を使用する場合は、背景を与えるdivの高さを設定する必要があります。