如何让Div宽度实现响应式布局？

嗨，我来帮你搞定这个响应式宽度的问题～

你当前给描述文本区域加了max-width:25%，在桌面端显示没问题，但到了移动端，25%的宽度会变得特别窄，内容挤在一起体验很差。其实不用写复杂的媒体查询，有两种更干净的方案可以解决：

方案1：用Bootstrap的响应式宽度工具类（推荐，因为你已经在使用Bootstrap的布局类） #

Bootstrap自带了一套响应式最大宽度工具类，可以直接替代你写的固定max-width，不用自己写媒体查询：

把你原来的这段代码：

<div class="d-flex pt-2" style="max-width: 25%; background-color: lightcoral;">

改成：

<div class="d-flex pt-2 mx-auto mw-100 mw-md-75 mw-lg-50 mw-xl-25" style="background-color: lightcoral;">

这些类的作用分别是：

• mw-100：超小屏幕（移动端，<576px）时，最大宽度100%，占满可用空间
• mw-md-75：中等屏幕（平板，≥768px）时，最大宽度75%
• mw-lg-50：大屏幕（小桌面，≥992px）时，最大宽度50%
• mw-xl-25：超大屏幕（大桌面，≥1200px）时，最大宽度25%
• mx-auto：让容器在水平方向居中，保持视觉上的美观

这样完全利用Bootstrap的内置能力，代码干净还能适配所有设备。

方案2：用现代CSS的clamp()函数（纯CSS方案，不依赖框架） #

如果你不想依赖Bootstrap的工具类，用CSS的clamp()函数可以实现流畅的无断点响应式宽度，不用写媒体查询：

把内联样式的max-width:25%改成：

max-width: clamp(280px, 25%, 600px);

解释一下这三个参数：

• 280px：最小值，确保移动端即使屏幕再窄，容器至少有280px的宽度，避免内容挤成一团
• 25%：首选值，在屏幕宽度合适时，使用父容器25%的宽度
• 600px：最大值，防止桌面端容器太宽，内容拉得太散

这个方法让宽度在不同设备间平滑过渡，没有生硬的断点，非常简洁现代。

额外小优化：简化内部布局代码 #

你里面的row和col-12其实是冗余的，因为col-12本来就会占满整行，直接去掉这些类，内容会自动占满容器宽度，代码更清爽：

优化后的内部结构示例：

<div class="d-flex pt-2 mx-auto mw-100 mw-md-75 mw-lg-50 mw-xl-25" style="background-color: lightcoral;">
  <div>
    Some long description text comes here. It can be multiple lines and should provide enough information to the user.
    <div class="pt-4">
      Options:
      <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
      </ul>
    </div>
  </div>
</div>

这样调整后，不管是桌面还是移动端，布局都会更合理，代码也更简洁。

内容来源于stack exchange