раскрывающийся список bootstrap4 в навигационной панели нажимает и перемещает элементы навигации - PullRequest
Новая
       55

раскрывающийся список bootstrap4 в навигационной панели нажимает и перемещает элементы навигации

0 голосов
/ 16 июня 2020

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

Кроме того, если я добавлю класс dropdown-toggle к кнопке, я получу очень уродливый expand_more текст рядом с кнопкой. Что не так с кодом ниже? 

  <nav class="navbar navbar-inverse fixed-top">
    <ul class="nav navbar-nav bd-navbar-nav flex-row">
      <li id="ncx1" class="nav-item">
    item1
      </li>
      <li id="ncx1" class="nav-item">
    item2
      </li>

      <li id="nvps0add" class="nav-item ml-3">
        <div class="dropdown"
             id="add_dropdown"
        >
          <button type="button" class="btn border-0"
             role="button"
                  data-toggle="dropdown"
                  style="padding:0; background: transparent;"
                  aria-haspopup="true" aria-expanded="false"
          >
        dropdown
          </button>
          <div class="dropdown-menu dropdown-menu-right"
               aria-labelledby="add_dropdown"
          >
            <a class="dropdown-item" href="#">
        dropitem1
            </a>
            <a class="dropdown-item" href="#">
        dropitem2
            </a>
          </div>
        </div>
      </li>

      <li id="nvps0delete" class="nav-item ml-3">
        item3
      </li>
    </ul>
  </nav>

1 Ответ

1 голос
/ 17 июня 2020

Демо: https://jsfiddle.net/b23catgp/

Пояснение:

Вам нужно было изменить свойство css position с stati * От 1023 * до абсолютное . Я включил хорошую ссылку о разнице, но, чтобы подвести итог ... stati c позиционированный элемент основан на его текущей позиции в потоке, в то время как элемент с абсолютным позиционированием позиционируется на основе его ближайшего позиционирования положение предка. Выпадающий список, когда он был активен, поскольку он был c, перемещался по остальным элементам навигации в вашей навигации. Вы не хотели этого поведения, поэтому, чтобы другие элементы заполнялись там, где раскрывающийся список заполнял бы пространство, вы должны указать его абсолютную позицию.

Что вы должны добавить к существующему коду: 

   /* New */
    .dropdown-menu {
      position: absolute !important;
    }

Кроме того, в демонстрации выше я снова добавил к кнопке класс «dropdown-toggle», и он работает нормально.

...