如何基于Bootstrap默认样式实现小屏设备下按钮占满整行宽度

你可以直接通过Bootstrap原生的响应式工具类实现需求，不需要额外写自定义CSS，修改点如下：

1. 调整登录表单的响应式布局：给<form>标签添加flex-column flex-lg-row gap-2类，删除原有的内联flex样式，实现大屏横向排列、小屏纵向排列的效果
2. 表单内的用户名输入框、密码输入框、登录按钮，全部添加w-100 w-lg-auto类，同时删除登录按钮的margin-left内联样式，保证小屏占满宽度、大屏宽度自适应
3. 右侧的两个操作按钮，添加w-100 w-md-auto类，同时给按钮外层容器添加w-100 w-md-auto类，配合你已有的容器布局规则，实现小屏全宽纵向排列、中大屏右对齐横向排列的效果

修改后的完整代码如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<header class="p-3 bg-dark text-white">
  <div class="container">
    <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
      <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
        <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
      </a>

      <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
        <li><a href="#" class="nav-link px-2 text-secondary">Home</a></li>
        <li><a href="#" class="nav-link px-2 text-white">Features</a></li>
        <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
        <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
        <li><a href="#" class="nav-link px-2 text-white">About</a></li>
      </ul>

      <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3 flex-column flex-lg-row gap-2">
        <input type="text" class="form-control form-control-dark w-100 w-lg-auto" placeholder="Username" aria-label="Username">
        <input type="password" class="form-control form-control-dark w-100 w-lg-auto" placeholder="Password" aria-label="Password">
        <button type="submit" class="form-control btn btn-outline-light w-100 w-lg-auto">Login</button>
      </form>

      <div class="d-grid gap-2 d-md-flex justify-content-md-end w-100 w-md-auto">
        <button class="btn btn-primary me-md-2 w-100 w-md-auto" type="button">Button</button>
        <button class="btn btn-primary w-100 w-md-auto" type="button">Button</button>
      </div>

      @*
      <div class="text-end d-sm-block gap-2">
        <button type="button" class="btn btn-warning" style="width:100%; display:block;">
                            Sign-up
                        </button>
      </div>*@
    </div>
  </div>
</header>

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