[英]Bootstrap navbar-brand above menu until resize and collapse in
我一直在尋找一個這樣的例子,找不到任何東西。 我使用常規文本作為我的導航欄品牌(沒有圖像),但字體是200-300%並占用了大量空間。 我想將名稱放在菜單上方。 但是,當窗口調整大小時,我需要它折疊到導航欄的中心(當鏈接折疊時)。
應該看起來像這樣:
WEBSITE NAME
link link1 link2 link3 link4 link5
並陷入困境
WEBSITE NAME ==
所以,現在這就是我正在使用的。 兩側帶鏈接的居中文本,但由於不切實際的尺寸,鏈接在導航欄品牌后面溢出。
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BIG WEBSITE TITLE</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li id="nav">LINK for: </li>
<li id="nav"><a href="#"><i class="fa fa-mars" aria-hidden="true"></i> LINK</a></li>
<li id="nav"><a href="#"><i class="fa fa-venus" aria-hidden="true"></i> LINK</a></li>
<li id="nav"><a href="#">LINK</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
</ul>
</div>
</nav>
一些CSS
.navbar-brand
{
font-size: 200%;
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
@media (min-width: 768px) {
.navbar-brand,
.navbar-nav li a {
line-height: 70px;
height: 70px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.navbar-nav li {
line-height: 70px;
height: 70px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
.navbar-brand
{
font-size: 300%;
position: absolute;
width: 100%;
left: 0;
text-align: center;
vertical-align: middle;
margin: auto;
}
.navbar{
background-color: #ZZZZZ;
}
這對我來說根本不起作用。
這應該做到這一點
@media (min-width: 768px) { .navbar-nav.navbar-center, .navbar-header-center { margin-left: 50%; transform: translateX(-50%); } }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header navbar-header-center"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="clearfix"></div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-center"> <li><a href="#">Link1</a></li> <li><a href="#about">Link2</a></li> <li><a href="#about">Link3</a></li> <li><a href="#contact">Link4</a></li> </ul> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
所以我把這段代碼添加到了css中。
.navbar {
height:100px;
}
.nav.navbar-left{
bottom: 0;
left: 0;
position:absolute;
}
.nav.navbar-right{
bottom: 0;
right: 0;
position:absolute;
}
為此效果: https : //gyazo.com/c5ae543c41b4383189e0d65b1869699f
這是你想要的嗎? 如果沒有,我道歉。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.