Bootstrap导航栏折叠

我目前使用bootstrap的导航栏为了在屏幕变小时折叠元素。有两个div会在屏幕变小时崩溃，但在它们崩溃之前，这些元素会彼此堆叠在一起。Bootstrap导航栏折叠

我想什么做的，是在半屏的导航链接失败，然后在右边的社交媒体图标，但是使用引导的“隐藏sm”似乎不起作用。我在bootstrap上很新，并希望得到一些关于如何解决这个问题的建议。

我的HTML：

<!-- NAVIGATION BAR --> 
<div class="navbar navbar-default navbar-static-top navbar-inverse"> 

    <div class="container"> 

    <!-- HOME BRAND --> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
     <img src="./newnewfoy.png"> 
     </a> 
    </div> 

    <!-- NAV LINKS --> 
    <ul class="nav navbar-nav navbar-collapse collapse"> 
     <li class="nav-item"> 
     <a class="nav-link active" href="#">Home</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">About</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Event</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Volunteer</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Sponsors</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Contact</a> 
     </li> 
    </ul> 

    <!-- NAV MEDIA --> 
    <div class="nav navbar-collapse collapse medialinks hidden-xs"> 
     <a id="YOUcon" class = "mediacon" href="#"></a> 
     <a id="IGcon" class = "mediacon" href="#"></a> 
     <a id="TWTcon" class = "mediacon" href="#"></a> 
     <a id="FBcon" class="mediacon" href="#"></a> 
    </div> 

    </div> 

</div>

CSS：

.nav{ 
    height: 50px; 
} 

.mediacon{ 
    float: right; 
} 

.medialinks{ 
    float: right; 
} 

.navbar-brand{ 
    padding-top: 7px; 
}

来源

2017-07-18 Tin La

你必须添加一个按钮到导航栏标题打开和关闭导航栏。

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span>       
</button>

我创建了一个工作小提琴https://jsfiddle.net/x32tf96L/

HTML

<div class="container-fluid"> 

    <!-- HOME BRAND --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
    </button> 
    <a class="navbar-brand" href="#"> 
     <img src="./newnewfoy.png"> 
    </a> 
    </div> 

    <!-- NAV LINKS --> 
    <ul class="navbar-collapse collapse" id="myNavbar"> 
    <li class="nav-item"> 
     <a class="nav-link active" href="#">Home</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">About</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Event</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Volunteer</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Sponsors</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Contact</a> 
    </li> 
    </ul> 

    <!-- NAV MEDIA --> 
    <div class="nav navbar-collapse collapse medialinks hidden-xs"> 
    <a id="YOUcon" class = "mediacon" href="#"></a> 
    <a id="IGcon" class = "mediacon" href="#"></a> 
    <a id="TWTcon" class = "mediacon" href="#"></a> 
    <a id="FBcon" class="mediacon" href="#"></a> 
    </div> 

</div>

CSS是一样的。

来源

2017-07-18 00:52:03 Pete

我不认为这样会合拢导航链接之前的社交媒体图标，不是吗？我打算为链接做一个按钮，但我想确保在制作按钮时不会发生这种情况。 –

你可以为你的社交图标添加代码吗 – Pete

我使用了对图标的反应，所以他们不会只显示在jsfiddle上。我解决了我的问题，非常感谢！ –

我解决了它。

解决方案：

<div class="container"> 

    <!-- BRAND, BUTTON --> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
     <img src="./newnewfoy.png"> 
     </a> 
    </div> 

    <!-- NAV LINKS --> 
    <div> 
     <ul class="nav navbar-collapse collapse navbar-nav"> 
     <li class="nav-item"> 
      <a class="nav-link active" href="#">Home</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">About</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Event</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link disabled" href="#">Volunteer</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link disabled" href="#">Sponsors</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link disabled" href="#">Contact</a> 
     </li> 
     </ul> 

     <div class="medialinks hidden-sm"> 
     <a id="YOUcon" class = "mediacon" href="www.google.com"></a> 
     <a id="IGcon" class = "mediacon" href="www.google.com"></a> 
     <a id="TWTcon" class = "mediacon" href="www.google.com"></a> 
     <a id="FBcon" class="mediacon" href="www.google.com"></a> 
     </div> 
    </div> 
</div>

来源

2017-07-18 01:42:56

Bootstrap导航栏折叠

回答

相关问题