点击

Question

我在bootstrap的顶部导航栏上使用了一个下拉选项，它有一个怪癖，当导航栏出现时，它会将导航栏左侧的内容推下来。

点击

之前

单击后

这是使用的HTML

<!DOCTYPE html>
<html>
<head>
    <title>Notifications</title>

    <meta charset="utf-8"/>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/notification.css">

    <script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script>
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
    <!-- Image and text -->
    <nav class="navbar navbar-light">
      <a class="navbar-brand" href="#">
        <img src="img/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
        Bootstrap
      </a>

      <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Notifications <span class="badge badge-secondary">0</span>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
         </li>
      </ul>
    </nav>


</body>
</html>

Answer 1

对引导程序导航的默认防御是推迟内容......
您可以position: absolute;使用ul

＆＃13;

ul{
    position: absolute;
    right: 50px;
    top: 14px;
}

＆＃13;

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <!-- Image and text -->
    <nav class="navbar navbar-light">
      <a class="navbar-brand" href="#">
        <img src="img/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
        Bootstrap
      </a>
<div>
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Notifications <span class="badge badge-secondary">0</span>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
         </li>
      </ul>
      </div>
    </nav>

＆＃13;

Answer 2

尝试将内容放在单个'div'元素中，如下面的代码段所示：

    <body>
    <!-- Image and text -->
    <nav class="navbar navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="img/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">Bootstrap
      </a>

      <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Notifications <span class="badge badge-secondary">0</span>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
         </li>
      </ul>
    </div>
    </nav>
   </body>

Answer 3

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

＆＃13;

Answer 4

.dropdown-menu{
position:absolute;
}

将下拉列表设为position absolute，将为您提供所需的输出。

Answer 5

对于网页右上角的图标...

确保您的CSS文件位于引导库CSS文件的之后。
将以下代码插入CSS文件。
将id="dropdownMenu"添加到您的 html标记。这样可以防止弹出窗口离开页面，同时还可以防止导航栏弹出。

#dropdownMenu {
    position: absolute;
    left: auto;
    right: 0;
}

Answer 6

发生这种情况是因为引导程序具有css，如：

.navbar-nav .dropdown-menu{
    position: static;
}

为避免在下拉菜单中压低内容的问题。 只需添加css ：

.navbar-nav .dropdown-menu{
    position: absolute;
}

如果您的菜单在右侧并且内容溢出或不正确可见，则只需添加到

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">

将菜单下拉至align-right

导航栏上的Bootstrap下拉列表按下内容

点击

6 个答案: