Bootstrap 4 Dropdown 下拉项，左侧为 link，右侧为按钮

Question

我正在使用 bootstrap 4 并使用下拉菜单。

我需要一个列表，其中的列表项文本/锚点与往常一样...在左侧和同一行上，每个右侧都有一个按钮

这就是我所做的，但这是不对的。这是当前代码：

 <div class="dropdown-menu">
    <div class="dropdown-item">
       <div class="float-left"><a href="#">Item 1</a></div>
       <div class="float-right">
          <button class="btn"><img class="header-btn" src="button1.png" alt="" /></button>
       </div>
    </div>
    <div class="dropdown-item">
       <div class="float-left"><a href="#">Item 2</a></div>
       <div class="float-right">
          <button class="btn"><img class="header-btn" src="button2.png" alt="" /></button>
       </div>
    </div>
 </div>

如何在 Bootstrap 4 中以正确的方式完成这项工作？

Answer 1

为此您不需要浮动（浮动通常不应与 flex 一起使用）。只需使用正确的 flex properties on the item element, and remove horizontal padding.

您可以通过移除锚点和按钮周围的 div 来进一步简化。我已经在第二项中这样做来演示。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>

  <div class="dropdown-menu">
    <div class="dropdown-item d-flex align-items-center justify-content-between px-0">
      <div><a href="#">Item 1</a></div>

      <div class="t">
        <button type="button" class="btn btn-primary">Primary</button>
      </div>
    </div>

    <div class="dropdown-item d-flex align-items-center justify-content-between px-0">
      <a href="#">Item 2</a>
      <button type="button" class="btn btn-primary">Primary</button>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

Answer 2

撇开糟糕的样式不谈，有了浮动，缺少的是顶部的按钮和下拉菜单包装器。

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
    </button>

我还在图像中添加了文字 alt="item1" 这样您就可以真正看到一些东西（通常是一个很好的做法）

请参阅参考资料中的第一个示例：https://getbootstrap.com/docs/4.6/components/dropdowns/

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <div class="dropdown-item">
      <div class="float-left"><a href="#">Item 1</a></div>
      <div class="float-right">
        <button class="btn"><img class="header-btn" src="button1.png" alt="item1" /></button>
      </div>
    </div>
    <div class="dropdown-item">
      <div class="float-left"><a href="#">Item 2</a></div>
      <div class="float-right">
        <button class="btn"><img class="header-btn" src="button2.png" alt="item2" /></button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

Bootstrap 4 Dropdown 下拉项，左侧为 link，右侧为按钮

Bootstrap 4 Dropdown dropdown-item with link on left and button on the right

twitter-bootstrap

bootstrap-4