引导菜单中的下拉菜单显示堆叠在输入框上，而不是旁边

Question

我正在使用 boostrap v. 5.2.3 改编一个网络程序。页面右边缘有一个输入框，我想在其左侧添加一个下拉菜单。我使用了这段代码：

<div class="col-1 pe-3">
   <select name="display_format" id="display_format" class="col-1 form-control form-control-sm">
      <option value="display">Display</option>
      <option value="output">Output</option>
   </select>
   <input id="select_year" type="number" class="col-2 form-control form-control-sm">
</div>

如果可行，但下拉列表会堆叠显示在输入框上，而不是之前，最好在其间留有某种空间。

有人可以将我推向正确的方向吗？

我尝试查看引导文档，但它非常广泛，我无法找到，

pe-3

是什么意思...

感谢您的帮助！

Answer 1

p

用于填充，

e

用于结束，

3

是尺寸。 简而言之：右侧“3 padding”。 尺寸文档

您可以使用输入组和下拉菜单：

<div class="input-group mb-3">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
  <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

或者带有选择的 flexbox，如您的示例中所示，在容器元素中使用这些类：

d-flex flex-row flex flex-nowrap

。

<div class="d-flex flex-row flex flex-nowrap" style="gap: 15px;">
   <select name="display_format" id="display_format" class="col-1 form-control form-control-sm">
      <option value="display">Display</option>
      <option value="output">Output</option>
   </select>
   <input id="select_year" type="number" class="col-2 form-control form-control-sm">
</div>

flex-nowrap

防止换行并强制元素彼此相邻。

gap

定义弹性盒内元素之间的间距。