[英]Bootstrap Fixed Navbar Links to stay on same line as Brand
在開始之前,我搜索了最近幾個小時,發現了幾封答復,但沒有一個解決此問題的。
我只有一個鏈接,並且有固定的頂部導航欄。 我希望鏈接在移動/較小屏幕上與品牌保持一致。
現在在移動設備上(下面的參考圖片):
我嘗試將其正確浮動以查看是否有幫助,但沒有成功。
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a></div>
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">1 Link Only<span class="sr-only">(current)</span></a></li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-collapse.collapse {
display: inline-block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
您只需要刪除collapse navbar-collapse
類並使用自定義類即可。 您可以將其命名為custom-navbar-nav
。 最后,添加此處顯示的CSS。 如果您確實希望鏈接位於頂部,則需要使用媒體查詢。
.navbar-header { display: inline-block; } .custom-navbar-nav { display: inline-block; float: right; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Brand</a></div> <div class="custom-navbar-nav"> <ul class="nav navbar-nav"> <li class="active"><a href="#">1 Link Only<span class="sr-only">(current)</span></a></li> </ul> </div> </div> </nav>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.