Bootstrap 在使用内联浮动标签文本输入时，如何消除按钮上的这种“跳跃效应”？

ep6jt1vc 于 2023-10-14 发布在 Bootstrap

关注(0)|答案(1)|浏览(113)

任何与具有浮动标签的输入（Bootstrap 5）内联的元素似乎都会根据浮动标签的位置上下跳动。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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" 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" type="button" class="btn btn-primary">Press</button>
</div>

我想保持输入元素与按钮内联，而按钮不与浮动标签 * 相对 *。
我尝试在输入上应用position: absolute，正如预期的那样，这解决了这个问题，因为它不再与它内联的东西相关。不幸的是，我 * 需要 * 避免位置是绝对的，因为我实际上希望按钮的位置相对于输入。但不是浮动标签。

twitter-bootstrap

来源：https://stackoverflow.com/questions/77230527/how-can-i-eliminate-this-jumping-effect-on-my-button-when-using-an-inline-floa

1条答案

按热度按时间

rqqzpn5f1#

你需要使用Bootstrap的输入组：

输入组文档
浮动标签输入组文档

当使用一个组时，只尝试在最外面的元素上添加任何自定义样式和边距类，而不是在任何内部元素上

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="input-group mb-3 mt-3" style="margin-left:35px">
  <div class="form-floating">
    <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>

编辑：或者只使用the flexbox utility classes来分隔按钮

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="mb-3 mt-3 d-flex" style="margin-left:35px">
    <div class="form-floating">
      <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 ms-1 align-self-end">Press</button>
</div>

赞(0）回复(0）举报 2023-10-14

我来回答

Bootstrap 在使用内联浮动标签文本输入时，如何消除按钮上的这种“跳跃效应”？

1条答案

相关问题

热门标签

最新问答