Bootstrap 5.3.x：为何w-100 d-block d-md-none无法实现列换行？

你不需要额外添加那些w-100的强制换行元素，col-12 col-md-4的类本身就可以实现你要的需求——小屏幕（<768px）每张图占12列（一行1张），中等及以上屏幕（≥768px）每张图占4列（一行3张）。

错误原因分析 #

你误解了Bootstrap文档中“列换行技巧”的使用场景：那个技巧是用于在同一行内的列中间强制换行（比如前两列始终在一行，第三列强制换行到下一行），而你的需求是让列在不同断点自动占满整行，这种场景下Bootstrap的网格系统会自动处理换行，不需要额外的w-100元素。

你之前添加的<div class="w-100 d-block d-md-none"></div>不仅多余，还可能因为响应式显示类的优先级问题干扰布局：d-block是全局生效的块级显示，d-md-none仅在md及以上隐藏，在sm屏幕（576-767px）时这个元素会显示，导致列之间出现额外空白行，反而让你误以为布局失效。

正确代码示例 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="container">
  <div class="row mt-1">
    <div class="col-12 col-md-4">
      <div class="listing-item">
        <img class="img-fluid img-thumbnail" src="https://placehold.co/600x400">
      </div>
    </div>

    <div class="col-12 col-md-4">
      <div class="listing-item">
        <img class="img-fluid img-thumbnail" src="https://placehold.co/600x400">
      </div>
    </div>

    <div class="col-12 col-md-4">
      <div class="listing-item">
        <img class="img-fluid img-thumbnail" src="https://placehold.co/600x400">
      </div>
    </div>
  </div>
</div>

补充说明 #

如果你确实需要在某些断点强制列换行（比如md屏幕下前两列一行，第三列换行），正确的做法是使用w-100 d-none d-md-block d-lg-none这样的类，精准控制换行元素在指定断点显示/隐藏，但你的需求完全不需要这一步。

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