调整窗口大小时，导航项目消失

时间：2017-11-04 19:21:53

标签： jquery html css bootstrap-4

我在bootstrap中使用了折叠功能，但每当我调整窗口大小时，我的nav元素就会消失。你们有什么建议吗？我的代码如下：                            Navbar |田径队          

    <nav class= "navbar navbar-expand-lg">
        <a class="navbar navbar-brand" href="#"> Athletics 
            <img src="data:image/jpeg;base64,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" width="30" height="25">
        </a>

        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">

                <a class="nav-item nav-link" href="#"> Shop </a>
                <a class="nav-item nav-link" href="#"> About Us </a>
                <a class="nav-item nav-link" href="#"> Lookbook </a>

            </div>


        </div>

    </nav>


</body>

2 个答案:

答案 0 :(得分：1)

您使用的是bootstrap样式。在引导程序导航中，当您调整窗口大小时，菜单将缩小并显示在汉堡图标下。如果你不想汉堡图标添加到“in”类

下面 
<div class="collapse navbar-collapse in" id="navbarNavAltMarkup">

如果您想要默认行为汉堡图标，请在行上方添加以下代码

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    </button><div class="collapse navbar-collapse" id="navbarNavAltMarkup">


<nav class= "navbar navbar-expand-lg">
        <a class="navbar navbar-brand" href="#"> Athletics 
            <img src="data:image/jpeg;base64,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" width="30" height="25">
        </a>
		<!-- toggle navigation
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
		</button>-->
        <div class="collapse navbar-collapse in" id="navbarNavAltMarkup">
            <div class="navbar-nav">

                <a class="nav-item nav-link" href="#"> Shop </a>
                <a class="nav-item nav-link" href="#"> About Us </a>
                <a class="nav-item nav-link" href="#"> Lookbook </a>

            </div>


        </div>

    </nav>

答案 1 :(得分：0)

这是bootstrap的正确行为。

在较小的屏幕上观看时，它意味着重新组织更大的元素。

您需要做的是包含navbar-toggle元素，并使用data-target="#navbarNavAltMarkup"将其链接到导航菜单。此外，您的菜单中的a标记必须位于li标记内，而这些标记本身需要位于ul标记内。

此结构将满足您的需求：

working jsFiddle 

<nav class="navbar navbar-inverse navbar-static-top navbar-expand-lg" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNavAltMarkup">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="nav-brand" href="#"> Athletics 
            <img src="" width="30" height="25">
        </a>
    </div> 
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <ul class="nav navbar-nav">
          <li><a class="nav-item nav-link" href="#"> Shop </a></li>
          <li><a class="nav-item nav-link" href="#"> About Us </a></li>
          <li><a class="nav-item nav-link" href="#"> Lookbook </a></li>
        </ul>
      </div>
    </div> 
  </div>
</nav>

如果您希望禁用此行为，请参阅Bootstrap 3 - disable navbar collapse

相关问题
最新问题