Bootstrap 4代码小屏无法每行显示两张图片的问题咨询

嘿，你遇到的问题其实是Bootstrap版本变更带来的小细节差异！Bootstrap 4已经移除了col-xs-*这个类名，所以你写的col-xs-6在Bootstrap 4里是不生效的——浏览器识别不了这个类，就会让列元素默认占据整行宽度，自然就每行只显示1张图了。

为什么会这样？ #

Bootstrap 4重新定义了断点命名规则：

• 超小屏幕（<576px）：使用col-*替代原Bootstrap 3的col-xs-*
• 小屏幕（≥576px）：col-sm-*
• 中等屏幕（≥768px）：col-md-*
• 大屏幕（≥992px）：col-lg-*
• 超大屏幕（≥1200px）：col-xl-*

你的需求是小屏每行2张，对应超小屏幕断点，所以应该用col-6而不是col-xs-6。

修正后的代码 #

把所有col-xs-6替换成col-6就可以解决问题了：

<div class="container"> 
  <h2>Pictures of Coffee</h2> 
  <div class="row"> 
    <div class="col-lg-4 col-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div> 
    <div class="col-lg-4 col-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div> 
    <div class="col-lg-4 col-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div> 
    <div class="col-lg-4 col-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div> 
    <div class="col-lg-4 col-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div> 
    <div class="col-lg-4 col-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div> 
  </div>
</div>

修改后验证：

• 当屏幕宽度≥992px（大屏）：col-lg-4生效，每个列占12列中的4份，每行刚好3张图
• 当屏幕宽度<576px（小屏）：col-6生效，每个列占12列中的6份，每行显示2张图，完全符合你的预期！

内容的提问来源于stack exchange，提问作者Jerry Murphy