我目前正在使用bootstrap的导航栏,以便在屏幕变小时折叠元素。当屏幕变小时,有两个div会崩溃,但在它们崩溃之前,元素会相互堆叠。
我想在这里做的是在半屏导航链接之前折叠右边的社交媒体图标,但使用bootstrap的“hidden-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;
}
答案 0 :(得分:0)
您必须在导航栏标题中添加一个按钮才能打开和关闭导航栏。
<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是一样的。
答案 1 :(得分:0)
我解决了。
解决方案:
<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>