Bootstrap栅格实现带min-width的双响应式div布局问题求解

问题根源 #

你遇到的布局换行问题是浮动布局的默认规则导致的：当两个浮动元素的总宽度超过父容器宽度时，后一个元素会自动换行到下一行。当视口缩小到左侧2/12宽度小于227px时，左侧实际宽度为227px，加上右侧10/12的百分比宽度，总宽度超过.row的100%宽度，因此右侧div掉落到下方。

可行解决方案 #

方案1：基于Flex布局改造（推荐，兼容性好，逻辑更简单） #

利用Flex布局默认不换行、可灵活控制元素对齐和伸缩的特性实现需求，代码示例如下：

<div class="row" style="display: flex; flex-wrap: nowrap; justify-content: space-between;">
   <!-- 左侧div -->
   <div class="col-lg-2" style="flex: 0 0 16.6667%; min-width: 227px;">
   </div>
   <!-- 右侧div -->
   <div class="col-lg-10" style="flex: 0 1 83.3333%;">
   </div>
</div>

参数说明：

• 父容器设置flex-wrap: nowrap强制元素不换行，justify-content: space-between保证右侧元素始终贴靠右边缘
• 左侧div的flex: 0 0 16.6667%表示不收缩、不放大，基础宽度为2/12的比例值，搭配min-width:227px实现最小宽度限制
• 右侧div的flex: 0 1 83.3333%表示基础宽度为10/12的比例值，允许收缩，视口宽度不足时会自动挤压宽度，不会换行掉落
• 如果需要允许两个div重叠，可将右侧div的flex-shrink属性改为0，此时右侧宽度不足时会直接溢出父容器，和左侧div重叠且保持右对齐

方案2：浮动布局兼容改造 #

如果必须保留浮动写法，可通过动态计算右侧宽度避免总宽度溢出，代码示例如下：

<div class="row">
   <div class="col-lg-2" style="float: left; width: 16.6667%; min-width: 227px;">
   </div>
   <div class="col-lg-10" style="float: right; width: calc(100% - max(16.6667%, 227px));">
   </div>
</div>

参数说明：

• 用max(16.6667%, 227px)动态计算左侧div的实际占用宽度
• 右侧div宽度通过calc函数设置为父容器宽度减去左侧实际宽度，保证两个元素总宽度永远等于父容器宽度，不会出现换行
• 如果需要允许重叠，可将右侧宽度固定为83.3333%，同时添加position: relative; z-index: 1;，视口宽度不足时右侧会自然和左侧重叠且保持右浮动

注意事项 #

• 如果你使用的是Bootstrap 5及以上版本，.row默认已经是Flex布局，只需额外添加flex-nowrap类即可，不需要重复写display:flex样式
• 如果需要兼容不支持max()函数的旧浏览器，可添加媒体查询，在视口宽度小于227px / (2/12) = 1362px时，手动设置右侧div的宽度规则即可

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