[英]Twitter bootstrap 3 navbar navbar-right outside navbar-collapse
在Twitter bootstrap 2.3.2我可以有類似的東西: http : //jsfiddle.net/aQwUZ/3/
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#" class="brand">BRAND</a>
<ul class="nav pull-right">
<li>
<a href="#">Fixed Link</a>
</li>
</ul>
<div class="nav-collapse">
<ul class="nav">
<li><a href="#">L1</a></li>
<li><a href=#">L2</a></li>
</ul>
</div>
</div>
</div>
</div>
一個Twitter引導程序導航欄,在移動響應視圖中,“固定鏈接”在標題中保持可見。
現在,在bootstrap 3中,升級我的代碼后,我只能: http : //jsfiddle.net/EC3Ly/4/
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<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="#">BRAND</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Fixed Link</a>
</li>
</ul>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">L1</a></li>
<li><a href=#">L2</a></li>
</ul>
</div>
</div>
</nav>
在移動響應視圖中,我得到2行...我試圖在“navbar-header”節點http://jsfiddle.net/EC3Ly/5/或第一個“navbar-header”中包裝但沒有成功。
我錯過了什么?
謝謝,
亞歷山大
我遇到了與BS3相同的問題,我找到解決問題的唯一方法是使用pull-left
和pull-right
pull-left
的組合
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">BRAND</a>
</div>
<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li>
<a href="#">Fixed Link</a>
</li>
</ul>
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">L1</a></li>
<li><a href="#">L2</a></li>
</ul>
</div>
</div>
</nav>
工作演示: http : //bootply.com/78856
移動導航欄中的兩行是由navbar-header的clearfix引起的:
.navbar-header {
.clearfix();
@media (min-width: @grid-float-breakpoint) {
float: left;
}
}
您可以使用媒體查詢和css來撤消此clearfix(並在折疊下拉列表之前添加新內容)
.navbar-right {float: right !important;}
@media(max-width:767px)
{
.navbar-right {margin-right:20px;}
.navbar-header:after
{
clear: none;
}
.navbar-nav.navbar-right > li { float: left; }
.navbar-collapse:before {clear:both;}
.navbar-collapse {overflow-y: hidden;}
.navbar-collapse.in {overflow-y: visible;}
.navbar{border-color: #101010; border-width: 0 0 1px;}
.navbar-collapse.in > ul {border-color: #101010; border-top:1px double;}
}
}
演示: http : //bootply.com/82366
媒體查詢還在較小的屏幕上為導航欄右側添加了一個浮動。 要在生產中使用此代碼,您可能會修復邊框以及可能的navbar css轉換。
問題在於navbar
崩潰的時間點。 默認情況下,Bootstrap以768px折疊。 如果你增加這個,你的navbar
會更快崩潰,你的問題就會消失。
執行此操作的最佳方法是自定義引導程序文件並將@grid-float-breakpoint
更改為850px(或您需要的任何大小)。 您可以從http://getbootstrap.com/customize/?id=9720390輕松自定義bootstrap 3
希望這可以幫助。
我這樣修好了。 就在品牌之后添加兩個具有相同類別和附加類別的新行。
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">Home</a>
<!-- Fake branding to avoid breaking up navbar -->
<a class="navbar-brand navbar-brand-fake">Item 1</a>
<a class="navbar-brand navbar-brand-fake">Item 2</a>
並將其添加到您的css文件中:
a.navbar-brand-fake {
font-size: 15px;
line-height: 21px;
margin-left: 2px !important;
}
調整大小時,Home,Item 1和Item 2保留在導航欄中,導航欄不會中斷。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.