Bootstrap下拉選單在展開后在螢屏外打開

我在右側的導航欄中有一個下拉選單，當我點擊它時，它的選單在最右邊打開，甚至在我水平滾動之前都不可見。

這是我的代碼

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <div style="margin-bottom: 0px;" class="navbar-header justify-content-start">
        <a class="navbar-brand" href="#">
          <img width="100" src="assets/Acc_logo.png" alt="logo">
        </a>
      </div>

    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button" 
         aria-haspopup="true" id="dropdownMenuButton" aria-expanded="false">
          <div class="divIcom"></div>
          <div class="divIcom"></div>
          <div class="divIcom"></div>
        </button>
        <ul class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </ul>
    </div> 
  </div> 
</nav>

還添加了一些CSS

li {
    list-style-type: none;
  }

.divIcom {
    width: 30px;
    height: 3px;
    background-color: gray;
    margin: 6px 0;
  }
  .dropdown-toggle::after {
    display:none;
}

我正在使用的樣式angular.json

    "styles": [
      "./node_modules/bootstrap/dist/css/bootstrap.min.css",
      "./node_modules/bootstrap-icons/font/bootstrap-icons.css",
      "src/styles.css"
    ],
    "scripts": [
      "./node_modules/jquery/dist/jquery.min.js",
      "./node_modules/popper.js/dist/umd/popper.min.js",
      "./node_modules/bootstrap/dist/js/bootstrap.min.js",
      "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
      "./node_modules/chart.js/dist/Chart.min.js"
      ]
  },

編輯 1 -

zone.js:1711 Uncaught TypeError: i.createPopper is not a function
    at Mt._createPopper (node_modules\bootstrap\dist\js\bootstrap.min.js:6:23961)
    at Mt.show (node_modules\bootstrap\dist\js\bootstrap.min.js:6:22277)
    at Mt.toggle (node_modules\bootstrap\dist\js\bootstrap.min.js:6:22073)
    at HTMLButtonElement.<anonymous> (node_modules\bootstrap\dist\js\bootstrap.min.js:6:26705)
    at HTMLDocument.s (node_modules\bootstrap\dist\js\bootstrap.min.js:6:4456)
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Zone.runTask (zone.js:178:47)
    at ZoneTask.invokeTask [as invoke] (zone.js:487:34)
    at invokeTask (zone.js:1661:18)
    at globalCallback (zone.js:1704:33)

我該如何解決？

uj5u.com熱心網友回復：

添加dropdown-menu-sm-end似乎適用于5.2：

li {
        list-style-type: none;
    }
    
    .divIcom {
        width: 30px;
        height: 3px;
        background-color: gray;
        margin: 6px 0;
    }
    
    .dropdown-toggle::after {
        display: none;
    }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <style>li {
        list-style-type: none;
    }
    
    .divIcom {
        width: 30px;
        height: 3px;
        background-color: gray;
        margin: 6px 0;
    }
    
    .dropdown-toggle::after {
        display: none;
    }</style>
<h1>Hello, world!</h1>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <div style="margin-bottom: 0px;" class="navbar-header justify-content-start">
                <a class="navbar-brand" href="#">
                    <img width="100" src="assets/Acc_logo.png" alt="logo">
                </a>
            </div>
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" id="dropdownMenuButton" aria-expanded="false">
                    <div class="divIcom"></div>
                    <div class="divIcom"></div>
                    <div class="divIcom"></div>
                </button>
                <ul class="dropdown-menu dropdown-menu-sm-end" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </ul>
            </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>

編輯

嘗試洗掉額外的代碼，它可能會導致沖突，只保留捆綁包（如果你沒有在其他地方使用它，也可以洗掉 jquery），試試這個::

   "scripts": [
      "./node_modules/jquery/dist/jquery.min.js",
      "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
      "./node_modules/chart.js/dist/Chart.min.js"
      ]

uj5u.com熱心網友回復：

改變這個dropdown-menu-sm-right

至 dropdown-menu-right dropdown-menu-sm-left

標籤：htmlcss有角度的推特引导

上一篇：Bootstrap5-flex列，子元素全寬和等高

下一篇：Bootstrap5-“此時元素輸入上不允許使用屬性href。”