ブートストラップcol-md-3クラスが動作していません

Question

次のコードスニペットを見つけてください。ここではcol-md-3クラスが機能していません。私はメディアのクエリを使用して行われる小さな、中規模、および大画面のための異なるスタイルを持っています。しかし、問題はcol-md-3のためだけに発生しています。どんなアイデアも参考になるでしょう。ブートストラップのメディアクエリで

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row row1"> 
 
    <div class="col-xs-12 col-sm-12 col-lg-2 col-md-3 col-xl-2 col xyz"> 
 
     <p class="spaceno textabovein3">Book Your Package</p> 
 
     <div class="img1 imga "> 
 
     <div class="overlay"> 
 
      <div class="textonimg">Select a date and a game and tell us your group numbers</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-12 col-lg-2 col-md-3 col-xl-2 col xyz"> 
 
     <p class="spaceno textabovein3">We will do the Rest</p> 
 
     <div class="img2 imga "> 
 
     <div class="overlay"> 
 
      <div class="textonimg">We will organise premium seats, Aussie Rules 101 and direction booklet and home team merchandise</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-12 col-lg-2 col-md-3 col-xl-2 col xyz"> 
 
     <p class="spaceno textabovein3">Receive the Box</p> 
 
     <div class="img3 imga "> 
 
     <div class="overlay"> 
 
      <div class="textonimg">Your package will be delivered to your hotel or home or you can pick it up at the stadium.</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-12 col-lg-2 col-md-3 col-xl-2 col xyz"> 
 
     <p class="spaceno textabovein3">Get to the Game!</p> 
 
     <div class="img4 imga "> 
 
     <div class="overlay"> 
 
      <div class="textonimg">Read your new AFL rules guide and local tips booklet, put on your scarf and proceed to enjoy the game!</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
</div>

Answer 1

、メディアデバイスの幅は最小992pxに設定されています。小さなデバイスにページを表示するには、col-sm- *クラスを使用できます。

https://getbootstrap.com/docs/3.3/css/#grid