请查找以下代码片段。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>
发布于 2017-10-09 10:36:32
在引导程序的媒体查询中,中型设备的宽度被设置为最小的992px。要将页面显示给较小的设备,可以使用col*类。
https://stackoverflow.com/questions/46644036
复制相似问题