Раскрывающийся список Bootstrap-4 автоматически получает некоторые стили.Как это отключить? - PullRequest
Новая
       9

Раскрывающийся список Bootstrap-4 автоматически получает некоторые стили.Как это отключить?

0 голосов
/ 21 ноября 2018

Я использую Bootstrap-4 для моего нового сайта.Я использую раскрывающийся список в нескольких местах на странице.В панели навигации заголовка раскрывающийся список работает нормально, но когда я использую ту же логику раскрывающегося списка внутри страницы, начальная загрузка или поппер добавляют некоторые встроенные стили, портя мои стили.Есть ли способ отключить добавление этого автоматического встроенного CSS-файла?

Ниже приведен скриншот неисправного раскрывающегося списка на странице:

enter image description here

Ниже приведен скриншот правильного выпадающего списка в верхнем заголовке.

enter image description here

Редактировать:

Код

Неправильный выпадающий список 

<div className="pull-right">

              <div className="dropdown">
                <a
                  href="#sfsd"
                  className="dropdown-toggle"
                  data-toggle="dropdown"
                  id="dropdownMenuLink"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  <i className="fa fa-ellipsis-v" aria-hidden="true" />
                </a>
                <ul className="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
                  <li className="dropdown-item">
                    <a href="#">
                      <i className="fa fa-language mr-2" />
                      <span>Switch to Arabic</span>
                    </a>
                  </li>
                  <li className="dropdown-item">
                    <a href="#UpdatePersonalInfo">
                      <i className="fa fa-user mr-2" />
                      <span>My Profile</span>
                    </a>
                  </li>
                  <li className="dropdown-item">
                    <a href="#ChangeSecuritySettings">
                      <i className="fa fa-cog mr-2" />
                      <span>My Configuration</span>
                    </a>
                  </li>
                  <li className="dropdown-item">
                    <a href="login.html">
                      <i className="fa fa-sign-out mr-2" />
                      <span>Logout</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>

Правильный выпадающий список 

<div className="user-menu dropdown pull-right">
            <a
              href="#Menu"
              className="dropdown-toggle"
              data-toggle="dropdown"
              aria-expanded="false"
            >
              <i className="fa fa-gear fa-spin" />
            </a>
            <ul className="dropdown-menu dropdown-menu-right">
              <li className="dropdown-item">
                <a href="#">
                  <i className="fa fa-language mr-2" />
                  <span>Switch to Arabic</span>
                </a>
              </li>
              <li className="dropdown-item">
                <a href="#UpdatePersonalInfo">
                  <i className="fa fa-user mr-2" />
                  <span>My Profile</span>
                </a>
              </li>
              <li className="dropdown-item">
                <a href="#ChangeSecuritySettings">
                  <i className="fa fa-cog mr-2" />
                  <span>My Configuration</span>
                </a>
              </li>
              <li className="dropdown-item">
                <a href="login.html">
                  <i className="fa fa-sign-out mr-2" />
                  <span>Logout</span>
                </a>
              </li>
            </ul>

1 Ответ

0 голосов
/ 21 ноября 2018

Как указано в документации, вы можете использовать опцию data-display ....

"По умолчанию мы используем Popper.js для динамического позиционирования. Отключитьэто со статическим. "

Просто помните, что тогда вам нужно будет обработать расположение выпадающего меню.

https://www.codeply.com/go/85fPF73EtF

Раскрывающееся меню Bootstrap 4 в аккордеоне

...