Question

我有以下html，其中包含一个bootstrap导航栏。如您所见，有一个名为＆＃34; Coverage＆＃34;的菜单项。一个名为＆＃34;添加覆盖范围＆＃34;的链接。这在较大的屏幕上工作正常，但是当我调整大小以使其变小时，正如预期的那样出现了Toggle导航。当我单击此按钮并且菜单展开以显示所有内容时，基金，日内订单和报告仍然可以正常工作，但是单击Coverage项目不会导致显示Add Coverage链接。什么都没发生。我做错了什么？

<body>
<nav class="navbar navbar-default navbar-static-top" style="padding: 0px;">
    <div class="container-fluid">
        <div class="navbar-header pull-left">
            <a class="navbar-brand pull-left" href="@Url.Action("Index", "Home", new { goHome = "true" })"><span class="glyphicon glyphicon-home"></span></a>
        </div>
        <div class="navbar-header">
            <div class="navbar-header">                    
                <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse navbar-left">
                <ul class="nav navbar-nav pull-left menu-item-spacing">
                    <li>@Html.ActionLink("Analysts", "Index", "Analyst")</li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Coverage<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li>@Html.ActionLink("Add Coverage", "AddCoverageSearch", "Coverage")</li>
                        </ul>
                    </li>
                    <li>@Html.ActionLink("Funds", "List", "Holding", null, null)</li>
                    <li>@Html.ActionLink("Intraday Orders", "Account", "Blotter", new { analystname = @user.UserName }, null)</li>
                    <li><a href="#" class="dropdown-toggle hidden-sxm">Reports</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

创建的HTML如下：

<nav class="navbar navbar-default navbar-fixed-top" style="padding: 0px;">
    <div class="container-fluid">
        <div class="navbar-header pull-left">
            <a class="navbar-brand pull-left" href="/?goHome=true"><span class="glyphicon glyphicon-home"></span></a>
        </div>
        <div class="navbar-header">
            <div class="navbar-header">                    
                <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse navbar-left">
                <ul class="nav navbar-nav pull-left menu-item-spacing">
                    <li><a href="/Analyst">Analysts</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Coverage<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="/Coverage/Coverage?status=A">All Coverage</a></li>
                            <li><a href="/Coverage/CoverageAssignments?groupingBySector=True">Coverage Assignments</a></li>
                            <li><a href="/Holding/PortfolioCoverage">Portfolio Coverage</a></li>
                            <li><a href="/Holding/PortfolioSnapshot">Portfolio Snapshot</a></li>
                                    <li><a href="/Writeup/WriteupSections?status=A">Writeup Sections</a></li>

                        </ul>
                    </li>
                    <li><a href="/Holding/List">Funds</a></li>
                    <li><a href="/Blotter/Account?analystname=Scott%20Mabry">Intraday Orders</a></li>
                    <li><a href="#" class="dropdown-toggle hidden-sxm">Reports</a></li>
                </ul>
            </div>
        </div>
  </nav>

Answer 1

您提供的代码结构对于Bootstrap似乎非常不典型。例如，您的.navbar-toggle内有.navbar-header的副本，其中也包含您的.collapse。

如果您要重新构建Navbar组件以更好地匹配Bootstrap 3.x的建议和样式，您将使用如下代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#null"><span class="glyphicon glyphicon-home"></span></a>
      
      <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
      <li><a href="#null">Analysts</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Coverage<span class="caret"></span></a>
        
        <ul class="dropdown-menu">
        <li><a href="#null">All Coverage</a></li>
        <li><a href="#null">Coverage Assignments</a></li>
        <li><a href="#null">Portfolio Coverage</a></li>
        <li><a href="#null">Portfolio Snapshot</a></li>
        <li><a href="#null">Writeup Sections</a></li>
        </ul>

      </li>
      <li><a href="#null">Funds</a></li>
      <li><a href="#null">Intraday Orders</a></li>
      <li><a href="#null">Reports</a></li>
      </ul>
    </div>
  </div>
</nav>

在上面的代码中，.dropdown-menu下的每个链接都按预期显示。整个导航菜单在较小的屏幕上崩溃，同样如预期的那样。如果上面的代码在插入项目时导致不同的结果，我会怀疑问题是一些冲突的额外CSS或JavaScript。

我会提供两个警告：

（1）上面的代码假设你使用的是Bootstrap 3.x.这基于代码中调用的一些类，这些类在4.x中不存在。如果您正在使用4.x，这可能也会导致您的一些问题，因为Navbar组件的结构已更改。

（2）出于缩小示例的目的，我删除了许多其他样式或对不属于Bootstrap的类的引用。我还从“报告”链接下删除了class="dropdown-toggle hidden-sxm"，因为该链接不是下拉菜单，hidden-sxm不是Bootstrap类。

Bootstrap Nav Bar对较小的设备不响应

1 个答案: