Flexbox内元素设为100%仍无法占满宽度，如何解决？

紫色标线区域的来源 #

你看到的紫色标线是Chrome开发者工具标记的margin区域，但核心问题并非直接的margin设置，而是：

• Bootstrap列布局中，未明确指定sm及以上屏幕下左右列的宽度，导致三列强制平分空间，中间列被不必要限制；
• 中间列内的form同时设置w-100和mx-auto，两者冲突引发布局计算异常，视觉上呈现内容偏移；
• 左侧列内的h1.me-auto在非flex容器中无法生效，导致列内空间分配不符合预期。

根本解决办法 #

通过调整Bootstrap列的宽度规则和移除冲突样式，让中间列自动填充剩余空间，内容真正居中：

1. 调整列宽度分配 #

将左右列的col-sm改为col-sm-auto（自动适配内容宽度），中间列保留col-sm（占用剩余空间），确保中间列填满左右列之外的所有可用空间，消除右侧空白。

2. 修正左侧列布局 #

给左侧列添加d-flex align-items-center，让h1.me-auto在flex容器中生效，确保标题靠左且列空间利用正常。

3. 移除冲突样式 #

删除中间form的mx-auto，w-100已让form占满父容器，mx-auto在此处无意义且干扰布局。

修改后的完整代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<nav class="container navbar navbar-expand-sm navbar-light mt-3" style="padding:15px;background-color:blue;">
  <div class="row w-100 align-items-center">
    <!-- 左侧列：sm以上自动适配内容宽度，添加flex布局让me-auto生效 -->
    <div class="col-6 col-sm-auto d-flex align-items-center order-1 order-sm-1">
      <h1 class="me-auto">
        <a href="/" class="text-body" style="text-decoration: none;">Some Title</a>
      </h1>
    </div>
    <!-- 中间列：sm以上占用剩余空间，保持居中样式 -->
    <div class="col-12 col-sm order-3 order-sm-2 text-center mt-3 mt-sm-0" style="background-color: green;">
      <form class="w-100" action="/askgpt" accept-charset="UTF-8" method="post">
        <input type="hidden" name="authenticity_token" value="blah" autocomplete="off">
        <input autocomplete="off" type="hidden" name="blah" id="blah">
        <input type="text" name="prompt" id="prompt" value="" class="form-control form-control-lg mb-2 w-100" placeholder="move the start of this session 10m forward">
      </form>
    </div>
    <!-- 右侧列：sm以上自动适配内容宽度 -->
    <div class="col-6 col-sm-auto order-2 order-sm-3 text-end">
      <div class="nav-item dropdown ms-0" style="max-height: 40px;">
        <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="material-icons" style="font-size: 35px;">menu</i>  
        </a>
        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink" style="font-size:30px;">
          <a class="dropdown-item" href="/home">Week view</a>
          <a class="dropdown-item" href="/leaderboard">Leaderboard</a>
          <a class="dropdown-item" href="/purchase">Buy now</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="/entries">Edit times</a>
          <a class="dropdown-item" id="lightdark">Dark ☽</a>
        </div>
      </div>
    </div>
  </div>
</nav>

效果说明 #

• sm及以上屏幕：左右列仅占用内容所需宽度，中间列自动填充剩余空间，form内容通过text-center真正居中，无右侧空白；
• 移动端：保留原有col-6和col-12的布局，中间列在底部占满宽度，不会出现margin适配问题。

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