子下拉列表显示在右侧

Question

我正在尝试创建一个子菜单，该子菜单显示的图片正好等于下图

但是，当我单击时它不会打开任何菜单

我的代码：

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Items</a>
    <div class="dropdown-menu shadow p-1 bg-white rounded" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Item1</a>
        <a class="dropdown-item">Item2</a>
        <a class="dropdown-item">Item3</a>
    </div>
</li>

Answer 1

您需要使用dropright类来实现此行为：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="container">
  <h2>Dropdowns</h2>
  <p>Add the .dropright class next to the dropdown menu to right-align the dropdown. Note that the caret/arrows is added automatically:</p>
  <div class="dropdown dropright">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropright button A
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link A1</a>
      <a class="dropdown-item" href="#">Link A2</a>
      <a class="dropdown-item" href="#">Link A3</a>
    </div>
    <br/>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropright button B
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link B1</a>
      <a class="dropdown-item" href="#">Link B2</a>
      <a class="dropdown-item" href="#">Link B3</a>
    </div>
  </div>
</div>