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

“默认情况下，我们使用Popper.js进行动态定位。请禁用此设置静态。”

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

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

相关：Bootstrap 4 dropdown menu within accordion

Answer 2

请添加您的自定义 css 代码（这不是真正的解决方案，但有效）

@media (min-width: 0px) and (max-width: 991px) { 
  .dropdown-menu.show {
    transform: unset !important;
    position: unset  !important;
  }
  
 }

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

2 个答案: