html - 如何设置BootStrap Navbar页面右侧下拉宽度只占用必要空间？

Question

请看下图，我在页面右上角有一个导航栏切换按钮， 当我展开它时，下拉元素的实际宽度占据了整个页面宽度，这会导致一个问题，如果您将鼠标移动到红色框内的任何点(即使不在 change bg 文本上)，您仍然可以触发下 zipper 接操作。

如何将下拉项的有效区域限制在文本本身？ (而且我不希望文本出现在页面的左侧) 感谢您的帮助。

这是我使用的代码:

<nav class="navbar  navbar-light">
        <a class="navbar-brand" href="#"><img src="../../assets/images/yet.png" alt="" srcset=""></a>
        <ul *ngIf="!name" class="navbar-nav ml-auto">
            <li  class="nav-item">
              <a class="nav-link" routerLink="login">login</a>
            </li>
            <!-- <li class="nav-item">
              <a class="nav-link" routerLink="signup">Signup</a>
            </li> -->
          </ul>


        <button class="navbar-toggler" type="button" data-toggle="collapse" 
                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
                aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">

              <li *ngIf="name" class="nav-item dropdown">
                  <a class="nav-link" href="#">{{name}}</a>
                </li>

            <li class="nav-item">
              <a class="nav-link drop" href="#" (click)="switchBackground()">change bg</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="#">settings</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="#" (click)="logoff()">Log Off</a>
            </li>
          </ul>
        </div>
      </nav>

Answer 1

将下面的 css 应用到您的组件

.nav-link{
    display: inline-block;
}

默认情况下，链接是 block 。所以他们会占据完整的宽度。将它们更改为 inline-block。

要将菜单项移动到左侧，请应用下面的 css

.navbar-nav{
    text-align: left;
}

文本默认左对齐。也许您在 body 中有一些其他 CSS 覆盖了默认行为。