Как установить BootStrap Navbar на странице, справа выпадающая ширина только занимает необходимое пространство？

Question

Пожалуйста, посмотрите на изображение ниже, у меня есть кнопка переключения навигационной панели в верхнем правом углу страницы, когда я раскрываю ее, фактическая ширина выпадающих элементов занимает всю ширину страницы, это вызывает проблему, что если вы переместитенаведя курсор на любую точку в красном поле (даже не на тексте change bg), вы все равно можете вызвать действие раскрывающейся ссылки.

Как ограничить эффективную область выпадающего элемента только самим текстом? (и я не хочу, чтобы текст попал на левую сторону страницы) Спасибо за вашу помощь.

Вот код, который я использую:

<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;
}

. По умолчанию текст должен быть выровнен по левому краю. Возможно, у вас есть другой CSS в теле, который переопределяет поведение по умолчанию.