讓導(dǎo)航條固定在頂部給body設(shè)置了padding-top:70px 為啥還是會(huì)遮住內(nèi)容呢?請大家復(fù)制我的代碼幫我看一下謝謝了<!DOCTYPE html><html>? <head>??? <meta charset="utf-8">??? <meta http-equiv="X-UA-Compatible" content="IE=edge">??? <meta name="viewport" content="width=device-width, initial-scale=1">??? <title>現(xiàn)代瀏覽器博物館</title>??? <!-- Bootstrap -->??? <link href="css/bootstrap.min.css" rel="stylesheet">??? <!--[if lt IE 9]>????? <script src="js/html5shiv.js"></script>????? <script src="js/respond.min.js"></script>??? <![endif]-->??? <style>?????? body{????? ??? ?padding-top:70px;?????? }??? </style>? </head>? <body>?? <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">? <div>??? <!-- Brand and toggle get grouped for better mobile display -->??? <div>?????
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">??????? <span>Toggle navigation</span>??????? <span></span>??????? <span></span>??????? <span></span>????? </button>????? <a href="#">現(xiàn)代瀏覽器博物館</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><a href="#">綜述</a></li>??????? <li><a href="#">簡述</a></li>??????? <li>????????? <a href="#" data-toggle="dropdown">特點(diǎn) <span></span></a>????????? <ul role="menu">??????????? <li><a href="#feature-tab" data-tab="tab-chrome">Chrome</a></li>?? ??? ??? ?<li><a href="#feature-tab" data-tab="tab-firefox">Firefox</a></li>?? ??? ??? ?<li><a href="#feature-tab" data-tab="tab-safari">Safari</a></li>?? ??? ??? ?<li><a href="#feature-tab" data-tab="tab-opera">Opera</a></li>?? ??? ??? ?<li><a href="#feature-tab" data-tab="tab-ie">IE</a></li>????????? </ul>??????? </li>??????? <li><a href="#">關(guān)于</a></li>????? </ul>??? </div><!-- /.navbar-collapse -->? </div><!-- /.container-fluid --></nav><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p>??? <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->??? <script src="js/jquery-1.11.1.min.js"></script>??? <!-- Include all compiled plugins (below), or include individual files as needed -->??? <script src="js/bootstrap.min.js"></script>? </body></html>
3 回答

幕布斯7574896
TA貢獻(xiàn)38條經(jīng)驗(yàn) 獲得超3個(gè)贊
因?yàn)槟愕膶?dǎo)航欄不符合bootstrap的規(guī)范,導(dǎo)致元素錯(cuò)位。你要是設(shè)置padding-top一個(gè)足夠大的數(shù)字,也是可以顯示的,不過這也是錯(cuò)誤的,正確的方式還是添加相應(yīng)類名:
<nav?class="navbar?navbar-inverse?navbar-fixed-top"?role="navigation"> ??<div?class="navbar-header> ????<!--?Brand?and?toggle?get?grouped?for?better?mobile?display?--> ????<div> ??????<button?type="button"?class="navbar-toggle"?data-toggle="collapse" ????????????????data-target="#example-navbar-collapse"> ????????????<span?class="sr-only">切換導(dǎo)航</span> ????????????<span?class="icon-bar"></span> ????????????<span?class="icon-bar"></span> ????????????<span?class="icon-bar"></span> ??????</button> ??????<a?class="navbar-brand"?href="#">現(xiàn)代瀏覽器博物館</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><a?href="#">綜述</a></li> ????????<li><a?href="#">簡述</a></li> ????????<li?class="dropdown"> ??????????<a?class="dropdown-toggle"?href="#"?data-toggle="dropdown">特點(diǎn)?<span?class="caret"></span></a> ??????????<ul?class="dropdown-menu"?role="menu"> ????????????<li><a?href="#feature-tab"?data-tab="tab-chrome">Chrome</a></li> ????????????<li><a?href="#feature-tab"?data-tab="tab-firefox">Firefox</a></li> ????????????<li><a?href="#feature-tab"?data-tab="tab-safari">Safari</a></li> ????????????<li><a?href="#feature-tab"?data-tab="tab-opera">Opera</a></li> ????????????<li><a?href="#feature-tab"?data-tab="tab-ie">IE</a></li> ??????????</ul> ????????</li> ????????<li><a?href="#">關(guān)于</a></li> ??????</ul> ????</div><!--?/.navbar-collapse?--> ??</div><!--?/.container-fluid?--> </nav>
- 3 回答
- 0 關(guān)注
- 2441 瀏覽
添加回答
舉報(bào)
0/150
提交
取消