css - Bootstrap-4 下拉列表自动获取一些样式。如何禁用它？

Question

我正在为我的新网站使用 Bootstrap-4。我在页面的多个位置使用下拉菜单。在标题导航栏中，下拉菜单工作正常，但是当我在页面内使用相同的下拉逻辑时，bootstrap 或 popper 正在添加一些内联样式，弄乱了我的样式。有没有办法禁止添加此自动内联 CSS？

下面是页面错误下拉的截图，

下面是顶部标题中正确下拉菜单的屏幕截图。

编辑:

代码

错误的下拉菜单

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

Answer 1

如文档中所述，您可以使用 data-display option ....

"By default, we use Popper.js for dynamic positioning. Disable this with static."

请记住，您必须处理下拉菜单的定位。

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

---

相关:Bootstrap 4 dropdown menu within accordion