代码之家 › 专栏 › 技术社区 › JohnWick

Bootstrap 4.0.0右对齐导航栏下拉菜单在打开[复制]时退出视口

bootstrap-4 twitter-bootstrap css html

JohnWick · 技术社区 · 8 年前

是否有办法使用Bootstrap 4.0.0解决此问题?我希望打开的下拉菜单的右边缘与下拉切换按钮的右侧对齐。这是一张图片,您可以看到它当前的显示方式。

代码:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">CS50Net</a>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <div class="btn-group">
        <button type="button" class="btn btn-danger">{{ session.username }}</button>
        <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
    </li>
  </ul>
</nav>