Question

目前，似乎V4没有关于使用导航栏下拉列表的文档。在V3文档之后，V4上的导航栏确实在点击时下拉，但似乎没有样式。如何让下拉列表正确显示in the V3 docs？我假设css选择器已经改变了;如果是这样的话，我将如何找到新的未记录的选择器？

这就是V4库中V3类目前的情况：

使用的HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</head>

<body>
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <a class="navbar-brand" href="/">HelloWorld</a>
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false">1<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Map</a></li>
                <li><a href="#">Grid</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false">2<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Map</a></li>
                <li><a href="#">Grid</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false">3<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Map</a></li>
                <li><a href="#">Grid</a></li>
            </ul>
        </li>
        <li class="nav-item"><a class="nav-link" href="">Test</a></li>
    </ul>
    <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item"><a class="nav-link" href="">Logout </a></li>
    </ul>
</nav>
</body>
</html>

Answer 1

您正在使用 <li> and <ul>而文档建议使用<div> and <a>代码

    <div class="dropdown">
      <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        1
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <button class="dropdown-item" type="button">Action</button>
        <button class="dropdown-item" type="button">Another action</button>
        <button class="dropdown-item" type="button">Something else here</button>
      </div>
    </div>

修改：Fiddle以供参考

Edit2：好的，所以你错过了课程btn and btn-success。还要添加css规则

.dropdown { display:inline-block;}

Edit3：Fiddle Link：使用<a>代替<button>下拉1

Answer 2

尝试以下：

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<div class="container-fluid">
  <a class="navbar-brand" href="/">HelloWorld</a>
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">1<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Map</a></li>
          <li><a href="#">Grid</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">2<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Map</a></li>
          <li><a href="#">Grid</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">3<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Map</a></li>
          <li><a href="#">Grid</a></li>
        </ul>
      </li>
      <li class="nav-item"><a class="nav-link" href="">Test</a></li>
    </ul>
    <ul class="nav navbar-nav pull-xs-right">
      <li class="nav-item"><a class="nav-link" href="">Logout </a></li>
    </ul>
  </div>
</div>

工作Plnkr：Plnkr

Twitter-Bootstrap V4导航栏下拉列表缺少样式

2 个答案: