Question

请找到以下代码段。 col-md-3班级无效的地方。我通过媒体查询使用不同的小型，中型和大型屏幕样式。但问题只出现在col-md-3。任何想法都会有所帮助。

＆＃13;

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

＆＃13;

Answer 1

在bootstrap的媒体查询中，媒体设备的宽度设置为最小992px。要将页面显示到较小的设备，您可以使用col-sm- *类。

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

Bootstrap col-md-3类不起作用

1 个答案: