Bootstrap 5 个下拉菜单，按钮位于右侧的 ul li 中（内联）

Question

我正在使用 Bootstrap 5，我有这个例子：

如您所见，我正在尝试向 LI 添加一些按钮：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Something here</a><button>A</button><button>B</button><button>C</button></li>
  </ul>
</div>

我想让它们在右边内嵌。

我该怎么做？

Answer 1

编辑：考虑使用 flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<li class="d-flex justify-content-between">
  <a class="dropdown-item" href="#">Something here</a>
  <div>
     <button>A</button>
     <button>B</button>
     <button>C</button>
  </div>
</li>

Answer 2

您可以为此使用 Flex 布局：https://getbootstrap.com/docs/5.0/utilities/flex/

试试这个代码？

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li class="d-flex gap-2">
      <a class="dropdown-item me-auto p-2" href="#">Something here</a>
      <button class="p-2">A</button>
      <button class="p-2">B</button>
      <button class="p-2">C</button>
    </li>
  </ul>
</div>

Bootstrap 5 个下拉菜单，按钮位于右侧的 ul li 中（内联）

Bootstrap 5 dropdown menu with buttons in ul li on the right (inline)

twitter-bootstrap

bootstrap-5