如何在Bootstrap 5中让按钮高度与其他表单元素匹配对齐

高度不一致的核心原因是自定义样式打断了Bootstrap原生的尺寸匹配规则，以下分别给出两类适配方案：

方案1：缩小按钮适配现有表单元素高度 #

操作要点：

• 移除按钮的btn-lg大尺寸类，使用默认尺寸按钮
• 给按钮添加和下拉框一致的py-2上下内边距类，统一内间距
• 给Flex布局的表单添加align-items-center类，保证所有子元素垂直居中对齐
• 统一表单控件与按钮的边框宽度，当前你给按钮自定义了border-width: 1.7px，给下拉框也添加相同的边框配置即可消除细微高度差

修正后核心代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<form class="form-inline d-sm-flex align-items-center pt-1 my-auto">
  <p class="align-middle text-light py-1">10 tokens. <br> something each. 10 max per txn</p>
  <div class="form-group mb-2 px-3">
    <select class="form-control form-control-lg py-2 px-5 form-control-dark text-center" style="background-color: black; color: white; border-width: 1.7px; border-color: rgba(255, 255, 255, 0.1);">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
    </select>
  </div>
  <button class="btn btn-dark py-2" style="background-color: rgba(0, 0, 0, 0.7); border-width: 1.7px; border-color: white;">
    <span class="px-4" id="mintBtn">make it</span>
  </button>
</form>

方案2：放大表单元素匹配现有按钮高度 #

操作要点：

• 保留按钮的btn-lg大尺寸类
• 移除下拉框额外添加的py-2自定义内边距，使用Bootstrap原生的大尺寸表单控件类适配
• 给表单添加align-items-center类保证垂直对齐
• 统一边框宽度参数即可

修正后核心代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<form class="form-inline d-sm-flex align-items-center pt-1 my-auto">
  <p class="align-middle text-light py-1">10 tokens. <br> something each. 10 max per txn</p>
  <div class="form-group mb-2 px-3">
    <select class="form-control form-control-lg px-5 form-control-dark text-center" style="background-color: black; color: white; border-width: 1.7px; border-color: rgba(255, 255, 255, 0.1);">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
    </select>
  </div>
  <button class="btn btn-dark btn-lg" style="background-color: rgba(0, 0, 0, 0.7); border-width: 1.7px; border-color: white;">
    <span class="px-4" id="mintBtn">make it</span>
  </button>
</form>

补充注意 #

原代码最后表单闭合标签写错了，将<form>改为</form>即可，避免出现不必要的布局异常。

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