Bootstrap 5实现两个div小屏块级、大屏行内显示且占满宽度的方法

首先明确：原生inline行内元素不支持设置固定宽度，因此如果要实现可自定义宽度的行内排列效果，推荐使用inline-block或弹性布局，Bootstrap 5 内置的响应式工具类无需额外编写自定义CSS即可实现需求。

方案1：使用响应式显示+宽度工具类 #

你可以根据需求自定义切换断点，以下示例以lg（≥992px）为大屏分界点，<992px为小屏：

<div class="w-100">
  <!-- 第一个div -->
  <div class="d-block d-lg-inline-block w-100 w-lg-50 p-3 border">
    第一个div内容
  </div>
  <!-- 第二个div -->
  <div class="d-block d-lg-inline-block w-100 w-lg-50 p-3 border">
    第二个div内容
  </div>
</div>

类名说明：

• d-block：小屏下默认块级显示，自动换行
• d-lg-inline-block：大屏下转为行内块级，支持设置宽度且可在同一行排列
• w-100：小屏下宽度100%，占满整个屏幕宽度
• w-lg-50：大屏下宽度为50%，两个div刚好并排占满整屏宽度

方案2：使用栅格系统（更推荐） #

Bootstrap 原生栅格系统天生支持响应式布局，代码更简洁：

<div class="container-fluid p-0">
  <div class="row g-0">
    <div class="col-12 col-lg-6 p-3 border">第一个div内容</div>
    <div class="col-12 col-lg-6 p-3 border">第二个div内容</div>
  </div>
</div>

类名说明：

• col-12：小屏下占满12列（即100%宽度），上下堆叠
• col-lg-6：大屏下各占6列（即50%宽度），横向并排
• g-0可移除栅格默认间距，需要保留间距直接删除该类即可
• 可根据实际需求替换断点，比如将lg改为md则切换分界点为≥768px，改为sm则切换分界点为≥576px。

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