如何在Bootstrap 4中实现大量div盒子的响应式布局？

嘿，这个场景太常见了！Bootstrap 4的网格系统刚好能完美解决你的问题，而且和你现有的Thymeleaf条件渲染完全兼容，给你两种实用的实现方式：

直接利用Bootstrap 4的容器-行-列结构，把你的条件渲染div转换成响应式列即可：

<div class="container my-4"> <!-- 外层容器，my-4是上下外边距，可选 -->
  <div class="row"> <!-- Bootstrap行，自动处理列的间距和换行 -->
    <div data-th-if="${foo.prop1}" class="data-box col-md-3 col-sm-6 col-12 mb-3"> some data </div>
    <div data-th-if="${foo.prop2}" class="data-box col-md-3 col-sm-6 col-12 mb-3"> some data </div>
    <div data-th-if="${foo.prop3}" class="data-box col-md-3 col-sm-6 col-12 mb-3"> some data </div>
    <div data-th-if="${foo.prop4}" class="data-box col-md-3 col-sm-6 col-12 mb-3"> some data </div>
    <div data-th-if="${foo.prop5}" class="data-box col-md-3 col-sm-6 col-12 mb-3"> some data </div>
    <div data-th-if="${foo.prop6}" class="data-box col-md-3 col-sm-6 col-12 mb-3"> some data...</div>
  </div>
</div>

关键类解释： #

• container：让内容居中且有固定宽度，换成container-fluid可以占满整个屏幕宽度
• row：作为列的容器，自动处理列之间的内边距（gutter）和换行逻辑
• col-md-3 col-sm-6 col-12：
  • col-12：手机屏幕（<576px）上每个盒子占满整行
  • col-sm-6：平板屏幕（≥576px）上每行显示2个盒子
  • col-md-3：桌面屏幕（≥768px）上每行显示4个盒子
• mb-3：给每个盒子添加底部外边距，避免不同屏幕下堆叠时过于拥挤

如果希望所有渲染出来的盒子高度一致（避免内容多少导致的高度参差不齐），可以结合Bootstrap的card组件和h-100类：

<div class="container my-4">
  <div class="row">
    <div data-th-if="${foo.prop1}" class="col-md-3 col-sm-6 col-12 mb-3">
      <div class="data-box card h-100 p-3"> some data </div>
    </div>
    <div data-th-if="${foo.prop2}" class="col-md-3 col-sm-6 col-12 mb-3">
      <div class="data-box card h-100 p-3"> some data </div>
    </div>
    <!-- 其余盒子同理 -->
  </div>
</div>

h-100会让卡片撑满父列的高度，card自带的样式还能让盒子看起来更美观，p-3是内边距，可根据需求调整。

不管哪种方案，Thymeleaf的data-th-if条件渲染都不会影响布局——只有满足条件的盒子会被渲染出来，Bootstrap会自动根据屏幕宽度排列这些列，完全实现响应式效果。

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