如何消除Bootstrap 5浮动标签输入框旁按钮的跳动效果？

这个问题的根源是Bootstrap的form-floating组件在输入框聚焦或输入内容时，标签会上移，导致容器高度发生变化，进而带动同行的按钮等元素上下跳动。以下是两种不用position: absolute的解决方案：

方案1：固定浮动标签容器高度 #

直接给form-floating容器设置固定高度，匹配输入框聚焦后的高度（Bootstrap默认form-control带浮动标签的高度是calc(3.5rem + 2px)），同时给按钮设置垂直对齐确保布局稳定：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div>
  <h3 style="display:inline">Example Header</h3>
  <div style="display:inline-block; margin-left:35px; height: calc(3.5rem + 2px);" class="form-floating mb-3 mt-3">
    <input style="width:auto" type="text" class="form-control" id="email" placeholder="Enter email" name="email">
    <label for="email">Email</label>
  </div>
  <button style="display:inline; vertical-align: bottom;" type="button" class="btn btn-primary">Press</button>
</div>

方案2：使用Flex布局重构行结构 #

用Flex布局来排列同行元素，通过align-items: center让所有元素垂直居中，即使form-floating高度有变化，视觉上也不会出现明显跳动，同时布局更规整：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div style="display: flex; align-items: center; gap: 1rem;">
  <h3>Example Header</h3>
  <div class="form-floating mb-3 mt-3">
    <input style="width:auto" type="text" class="form-control" id="email" placeholder="Enter email" name="email">
    <label for="email">Email</label>
  </div>
  <button type="button" class="btn btn-primary">Press</button>
</div>

这两种方法都能保持按钮与输入框的相对位置，同时解决跳动问题，你可以根据实际布局需求选择。

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