這篇文章主要為大家詳細(xì)介紹了BootStrap實(shí)用代碼片段之一，總結(jié)在使用BootStrap中遇到的問(wèn)題，并記錄解決方法，感興趣的小伙伴們可以參考一下
應(yīng)用場(chǎng)景：經(jīng)典上下布局中，頂部導(dǎo)航條固定，下部填充不顯示滾動(dòng)條
解決方案：導(dǎo)航條固定在頂部，同時(shí)為body設(shè)置內(nèi)邊距（padding-top），內(nèi)邊距為導(dǎo)航條高度（默認(rèn)50px，可自己調(diào)整高度），html代碼如下：
<!--html頁(yè)面布局-->
<div>
<!--導(dǎo)航欄-->
<div role="navigation">
<div>
<!--logo圖標(biāo)-->
<div>
<button type="button" data-toggle="collapse" data-target="#myMenu">
<span>切換導(dǎo)航條</span> <span></span>
<span></span> <span></span>
</button>
<a href="">
<img src="images/logo_2.png">
</a>
</div>
<!--導(dǎo)航欄菜單-->
<div id="myMenu">
<ul>
<li>
<a href="index.html">主頁(yè)</a>
</li>
<li>
<a href="#" data-toggle="modal">河道站點(diǎn)</a>
</li>
<li>
<a href="#" data-toggle="modal">水庫(kù)站點(diǎn)</a>
</li>
<li>
<a href="#">氣象站點(diǎn)</a>
</li>
<li>
<a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">降雨量<span></span>
</a>
<ul>
<li>
<a data-toggle="modal">1小時(shí)降雨</a>
</li>
<li>
<a href="#">3小時(shí)降雨</a>
</li>
<li>
<a href="#">24小時(shí)降雨</a>
</li>
</ul>
</li>
</ul>
<form role="search">
<div>
<input type="text" id="datetimepicker" placeholder="選擇日期">
</div>
<button type="button">確定</button>
</form>
</div>
</div>
</div>
<!--地圖窗口-->
<div id="map"></div>
</div>
</body>
</html>
CSS代碼：
*{
margin:0;
padding:0;
border:0;
}
html, body{
height:100%;
width:100%;
overflow:hidden;
}
body{
padding-top:50px;
}
.page-wrapper{
margin:0;
padding:0;
height:100%;
overflow:hidden;
}
#map{
width:100%;
height:100%;
}
希望本文所述對(duì)大家學(xué)習(xí)Bootstrap有所幫助。