d-flex引導程式內的填充-有解無憂

我嘗試在 d-flex 中使用填充來分隔在 d-flex 類中成為一個的元素，但是當我嘗試添加填充時，它不起作用并且什么也沒有改變，如果我不使用 d-flex，元素不會一一變為行內，所以我需要使用 d-flex 但在 d-flex 中，填充不起作用，如何正確使用它

代碼示例：

            <div class="d-flex pr-2">

              <div class="dropdown pr-2">
              
                <button class="btn bg-opacity-25 dropdown-toggle  border border-dark pr-2" style="" id="pageMenu" data-bs-toggle="dropdown"><i class="bi bi-microsoft"> </i></button>
                <ul class="dropdown-menu" aria-labelledby="pageMenu">
                  <li><a class="dropdown-item" href="#">5</a></li>
                  <li><a class="dropdown-item" href="#">10</a></li>
                  <li><a class="dropdown-item" href="#">25</a></li>
                </ul>


              </div>

              <div class="dropdown">

              <button class="btn bg-opacity-25 dropdown-toggle border border-dark" style="" id="filterMenu" data-bs-toggle="dropdown"><i class="bi bi-funnel"> Filter</i></button>
                <ul class="dropdown-menu" aria-labelledby="filterMenu">
                  <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>
                </ul>

              </div>

            </div>

圖片示例： d-flex 引導程式內的填充

uj5u.com熱心網友回復：

填充將在元素的邊框內添加空間。您可以通過your-class在 flex 容器中添加一個類并gap: 20px在父元素上使用 CSS 來解決此問題。它將元素彼此分開。

.your-class {
 gap: 20px
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<div class="d-flex mr-2 your-class">

  <div class="dropdown pr-2">

    <button class="btn bg-opacity-25 dropdown-toggle  border border-dark pr-2" style="" id="pageMenu" data-bs-toggle="dropdown"><i class="bi bi-microsoft"> </i></button>
    <ul class="dropdown-menu" aria-labelledby="pageMenu">
      <li><a class="dropdown-item" href="#">5</a></li>
      <li><a class="dropdown-item" href="#">10</a></li>
      <li><a class="dropdown-item" href="#">25</a></li>
    </ul>


  </div>

  <div class="dropdown">

    <button class="btn bg-opacity-25 dropdown-toggle border border-dark" style="" id="filterMenu" data-bs-toggle="dropdown"><i class="bi bi-funnel"> Filter</i></button>
    <ul class="dropdown-menu" aria-labelledby="filterMenu">
      <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>
    </ul>

  </div>

</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/492268.html

標籤：html css 推特引导弹性盒

上一篇：有沒有辦法將專案串列分配給會話，然后使用ASP.NETCORE6呼叫它？

下一篇：React和Bootstrap最佳實踐（我應該如何設計我的網站）