當我沿着頁面向下滾動時,導航變得更大。 導航欄位於代碼的頂部。 我試着把導航放在代碼的底部......它沒有奏效... 有人可以告訴我什麼是問題嗎?Bootstrap 3.2當滾動過去時導航欄變大
我的代碼 - http://imgur.com/u2qr9hd 導航欄 - http://imgur.com/zSKoQyS
當我沿着頁面向下滾動時,導航變得更大。 導航欄位於代碼的頂部。 我試着把導航放在代碼的底部......它沒有奏效... 有人可以告訴我什麼是問題嗎?Bootstrap 3.2當滾動過去時導航欄變大
我的代碼 - http://imgur.com/u2qr9hd 導航欄 - http://imgur.com/zSKoQyS
您需要刪除的屬性data-spy
,data-offset-top
和data-offset-bottom
從nav
標籤。真正的問題是data-offset-bottom
屬性,但其他人不應該在那裏。
HTML:
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
你還需要一點填充添加到body元素,讓你在頁面沒有按」底部內容不會卡在導航背後。
CSS:
body {
padding-bottom: 50px;
}
非常感謝!有效!!! – 2014-11-21 21:22:57
不要忘記接受答案。 – MattD 2014-11-21 21:32:20
你可以創建一個小提琴(或bootply),以幫助我們診斷問題? – ochi 2014-11-21 19:41:54
你可以把代碼放在JSFiddle或類似的地方嗎?在Imgur很難使用它。 – khilley 2014-11-21 19:42:10
如果有任何問題,他需要將他的代碼放在他的問題中,並且他的代碼圖像不計算在內。如果它位於圖像中,則無法調整其代碼。 – MattD 2014-11-21 19:50:19