窗口大小調整到手機大小的引導

-1

<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> \t 
 

 
<div class="container-fluid"> 
 
    
 
\t \t <div class="page-header"> 
 
\t \t \t <h1>First Bootstrap Project</h1> 
 
\t \t </div> 
 

 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-2" id="menus"> 
 
\t \t \t \t <ul class="nav nav-pills nav-stacked"> 
 
\t \t \t \t \t <li><a href="#">Menu 1</a></li> 
 
\t \t \t \t \t <li><a href="#">Menu 2</a></li> 
 
\t \t \t \t \t <li><a href="#">Menu 3</a></li> 
 
\t \t \t \t \t <li><a href="#">Menu 4</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 

 
\t </div>

和我想是時候重新調整大小的窗口移動的大小菜單應該消失？我嘗試了很多，但從未達到過

來源

2016-04-18 dina osama

你寫過的任何文字' 「爲了做到這一點？ – Rayon

我試過$（窗口）.resize，但我沒有解決..任何建議？ –

我建議你閱讀Bootstrap的[Getting Started]（http://getbootstrap.com/getting-started/）部分。 – Matheno

閱讀此鏈接上的導航欄部分，http://getbootstrap.com/components/#navbar。他們提供的代碼示例會在屏幕調整爲手機大小時隱藏菜單。

來源

2016-04-18 12:25:30 CZorio

顯示爲移動視圖按鈕.....

<!-- 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>

或使用該bare template爲leanring

來源

2016-04-18 12:32:27

嘗試這樣的事情，

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' }); 
       } 
      }

來源

2016-04-18 12:35:32

窗口大小調整到手機大小的引導

回答

相關問題