Bootstrap4Dropdown下拉項，左側有鏈接，右側有按鈕

我正在使用引導程式 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 中以正確的方式完成的？

uj5u.com熱心網友回復：

您不需要浮點數（通常不應將浮點數與 flex 一起使用）。只需在 item 元素上使用適當的flex 屬性，然后洗掉水平填充。

您可以通過從錨點和按鈕周圍洗掉 div 來進一步簡化。我已經在第二個專案中這樣做了。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

uj5u.com熱心網友回復：

拋開不好的樣式不談，浮子缺少的是頂部的按鈕和下拉包裝器。

<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="Bootstrap 4 Dropdown 下拉項，左側有鏈接，右側有按鈕"這樣你就可以實際看到一些東西（通常是一個好習慣）

請參閱參考資料中的第一個示例：https ://getbootstrap.com/docs/4.6/components/dropdowns/

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

標籤：推特引导 引导程序 4

上一篇：Python使用Matplotlib繪制開/關資料

下一篇：帶有行內復選框的Bootstrap5手風琴？