Bootstrap表单中如何实现select与提交按钮同一行对齐

你当前用的是Bootstrap 5.2版本，之前的写法不生效核心是两点：

• Bootstrap 5 已经移除了旧版本的float-right、text-right类，对应右浮动、文本右对齐的类名更新为float-end、text-end，旧类名在v5版本里没有匹配的样式规则
• 包裹提交按钮的div是块级元素，默认会占满父容器100%宽度，就算浮动类写对，也会和select下拉框分成上下两行，达不到同行排列的要求

直接用Bootstrap内置的flex工具类实现最方便，不需要写额外自定义CSS：

• 给form标签加d-flex align-items-center gap-2类，让表单内的子元素默认横向排列、垂直居中对齐，元素之间保留2个单位的间距
• 给包裹按钮的div加ms-auto类，利用flex的自动外边距特性，把按钮直接推到表单行的最右侧
• 删掉按钮上没用的align="right"属性，这个属性对input元素的对齐根本没有效果

修正后的可运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0-beta1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0-beta1/js/bootstrap.min.js"></script>
  <title>Document</title>
</head>
<body>
  <form role="form" id="sendAddress" action=/sendAddress method="post" class="d-flex align-items-center gap-2">
    <select class="form-select" aria-label="Default select example" name="role">
      <option value="r">随机</option>
      <option value="w">战士</option>
      <option value="t">坦克</option>
      <option value="a">刺客</option>
    </select>
    <div class="ms-auto">
      <input type="submit" value="Submit" name="selectedvalue" class="btn btn-primary">
    </div>
  </form>
</body>
</html>

适配提示：如果需要在手机端自动切换为上下堆叠布局，把form上的d-flex替换成d-sm-flex即可，屏幕宽度小于576px时会自动换行，不用额外写媒体查询。

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