<nav class="navbar navbar-default navbar-fixed-top">
但過沒多久，你就會發現，加上 navbar-fixed-top 後，原先的 NavBar 很像浮起來似的，永遠固定在螢幕上面，但麻煩的是，我原先設計在 NavBar 下方緊鄰的內容，會因為被 NavBar 遮蔽而永遠看不到。
正如上圖，項目a ~ 項目c，都會一直被遮住。這問題，我在 twitter bootstrap navbar fixed top overlapping site 找到了答案。只需要將 body 的樣式，加上 padding-top: 70px; 就可以解決。
程式碼如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyPage.aspx.cs" Inherits="bot02.MyPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style> body { padding-top: 70px; }</style>
</head>
<body>
<form id="form1" runat="server">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<a href="#" class="navbar-brand">正妹快搜網</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="myNav" class="collapse navbar-collapse">
<ul class="navbar-nav nav">
<li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-heart"></span> Tour</a></li>
<li><a href="#"><span class="glyphicon glyphicon-picture"></span> Photography</a></li>
<li><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-info-sign"></span> About US <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-plane"></span> 經營理念</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 攝影團隊</a></li>
<li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 加入我們</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div >
項目 a<br />
項目 b<br />
項目 c<br />
項目 d<br />
項目 e<br />
項目 f<br />
項目 g<br />
項目 h<br />
項目 i<br />
項目 j<br />
項目 k<br />
項目 l<br />
項目 m<br />
項目 n<br />
項目 o<br />
項目 p<br />
項目 q<br />
項目 r<br />
項目 s<br />
項目 t<br />
項目 u<br />
項目 v<br />
</div>
</form>
</body>
</html>
參考：
01：twitter bootstrap navbar fixed top overlapping site
沒有留言:
張貼留言