在引導程序中將窗口大小調整為移動大小
[英]resize a window to mobile size in bootstrap
問題描述
伙計們，我是引導程序的初學者，我有那個代碼
<head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1256"> <title>Bootstrap Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <div class="container-fluid"> <div class="page-header"> <h1>First Bootstrap Project</h1> </div> <div class="row"> <div class="col-md-2" id="menus"> <ul class="nav nav-pills nav-stacked"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </div> </div> </div>
我想要的是當將窗口大小重新調整為移動設備大小時，菜單應該消失？？？ 我嘗試了很多但從未達到
3 個解決方案
解決方案1
0 已采納 2016-04-18 12:25:30
閱讀此鏈接上的導航欄部分， http://getbootstrap.com/components/#navbar 。 當屏幕調整為手機大小時，他們提供的代碼示例隱藏菜單。
解決方案2
0 2016-04-18 12:32:27
在移動視圖上顯示為按鈕.....
<!-- 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" aria-expanded="false">
<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>
或使用此裸模板進行學習
解決方案3
0 2016-04-18 12:35:32
嘗試這樣的事情，
function AdjustLayoutonResize() {
windowWidth = $(window).width();
windowHeight = $(window).height();
fixedwidth = screenwidth;
if (windowWidth <= fixedwidth) {
$('#menus').css({ 'width': sliderwidth, 'display': none});
}
else {
$('#menus').css({ 'width': sliderwidth, 'display': 'block' });
}
}
調整大小窗口-移動大小事件不起作用時
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.