引导-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*类。

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