Bootstrap折疊導航欄不會在平板電腦設備上折疊
[英]Bootstrap collapse nav bar doesn't collapse on tablet devices
問題描述
<!DOCTYPE html> <html lang="en"> <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>GRN System</title> <link rel="shortcut icon" href="scicon.gif" /> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <!--My CSS link--> <link rel="stylesheet" type="text/css" href="grncss.css"> </head> <body> <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand nav-link"google ">Google</a> </div> <!-- /.navbar-header --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.php"><font color="">Home</font></a> </li> <li><a href="index.php?BookIn"><font color="">Book In</font></a> </li> <li><a href="index.php?Measure&Update"><font color="">Measure & Update</font></a> </li> <li><a href="index.php?ViewAll"><font color="">Filter/Search</font></a> </font> </li> <li><a href="index.php?Tools"><font color="">Tools</font></a> </li> <li><a href="index.php?LoadList_CoLoad"><font color="">Co-Load LoadList</font></a> </li> <li><a href="index.php?LoadList_CoLoad"><font color="">Co-Load LoadList</font></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Stock<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="index.php?StockCheck"><font color="">Stock Check</font></a> </li> <li><a href="index.php?stockimg"><font color="">Stock Image</font></a> </li> </ul> </li> <!-- <li><button class="btn btn-warning btn-sm navbar-btn">Sign Up</button></li>--> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <!-- /.navbar --> <div id="top" class="jumbotron"> <div class="container"> </br> <div class="h1s"> <h1>GRN System</h1> </div> <!-- <p><a class="btn btn-warning btn-lg">Sign Up Today <span class="glyphicon glyphicon-circle-arrow-right"></span></a></p>--> <script src="tools/ajax.js" type="text/javascript"></script> <!-- <script type="text/javascript" src="checkall.js"></script> --> <title> <?php echo $program_name; ?> </title> <script type="application/javascript" src="inc/jquery-1.8.1.min.js"></script> <script type="application/javascript"> $.ajaxSetup({ cache: false }); var ajax_load = "<img src='img/load.gif' alt='loading...' />"; var loadUrl = "listJobsOutstanding.php"; </script> <?php if (isset($_GET[ 'BookIn'])) {include( "_BookIn.php");} else if (isset($_GET[ 'Completed'])) {include( "completed.php");} else if (isset($_GET[ 'ViewAll'])) {include( "viewall.php");} else if (isset($_GET[ 'Measure'])) {include( "measure_update.php");} else if (isset($_GET[ 'Locate'])) {include( "locate.php");} else if (isset($_GET[ 'Filter'])) {include( "filter.php");} else if (isset($_GET[ 'Pieces'])) {include( "pieces.php");} else if (isset($_GET[ 'Tools'])) {include( "tools.php");} else if (isset($_GET[ 'About'])) {include( "about.php");} else if (isset($_GET[ 'Calendar'])) {include( "cal.php");} else if (isset($_GET[ 'Admin'])) {include( "admin.php");} else if (isset($_GET[ 'Reprint'])) {include( "reprint.php");} else if (isset($_GET[ 'stockimg'])) {include( "stockimg.php");} else if (isset($_GET[ 'LoadList_CoLoad'])) {include( "loadlist_coload.php");} else if (isset($_GET[ 'StockCheck'])) {include( "stockcheck.php");} else {include( "start.php");}; ?> <br/> <br/> </font> </td> </tr> <tr height='50px'> <td align='center'><font face='Century Gothic' color='<?php echo $text; ?>'><font size='-2' face='Century Gothic' color='<?php echo $text; ?>'><?php echo $copy; ?></font> </td> </tr> </table> </font> <?php mysql_close($link); ?> </div> <!-- /.container --> </div> <!-- /.jumbotron --> <div class="container"> <div class="col-md-4 col-sm-6 benefit"> <div class="benefit-ball"> </div> <a href="http://test:2235/index.php?StockCheck"><h3>Stock Check</h3></a> <p>Stock check allows the user to select containers they would like to check freight for. You can also log the current stock in the warehouse, this will then be stored logged and stored in the database.</p> </div> <!-- /.benefit --> <div class="col-md-4 col-sm-6 benefit"> <div class="benefit-ball"> </div> <a href="http://test:2235/index.php?BookIn"><h3>Book In</h3></a> <p>The book in feature allows the user to book in an item ready for shipping. Once booked in, stickers will be automatically printed. These stickers can then be placed on the item for referencing.</p> </div> <!-- /.benefit --> <div class="col-md-4 col-sm-6 benefit"> <div class="benefit-ball"> </div> <a href="http://test:2235/index.php?ViewAll"><h3>Filter/Search</h3></a> <p>The filter and search option allows the user to filter and search items that have been previously booked in. The results will then be displayed below for the criterion entered by the user.</p> </div> <!-- /.benefit --> <div class="col-md-4 col-sm-6 benefit"> <div class="benefit-ball"> </div> <a href="http://test:2235/index.php?Tools"><h3>Tools</h3></a> <p>Tools allows you to view load and cargo data. You can view previous load lists and the following: Bay, Ertz, Hazardous, Import, Racking, Discrepancies, Performance, Review, Busiest Times, Busiest Days.</p> </div> <!-- /.benefit --> <div class="col-md-4 col-sm-6 benefit"> <div class="benefit-ball"> </div> <a href="http://test:2235/loadlist_coload.php"> <h3>Co-Load LoadList</h3> </a> <p>The Co-Load Load List is used when another company is loading the cargo. This function on the GRN system allows us to release cargo when needed.</p> </div> <!-- /.benefit --> <div class="col-md-4 col-sm-6 benefit"> <div class="benefit-ball"> </div> <a href="http://test:2235/index.php?Measure&Update"><h3>Measure & Update</h3></a> <p>This measure and update feature allow you to enter the number of pieces, who the item was received and measured by. The condition of the item (good/damaged). If it is sufficiently packed for export, and if the item is awkward.</p> </div> <!-- /.benefit --> </body> </html>
Bootstrap折疊導航欄不會在表格設備上折疊。 當我縮小窗口時，可以在手機和瀏覽器上正常工作。 在設備上，鏈接僅位於彼此之下並堆積。
與LINK類似的問題，但我已經嘗試過了，但沒有成功。
1 個解決方案
解決方案1
3 2015-10-13 08:54:40
您是否在Page標頭上添加了以下內容？
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
添加並嘗試
如果有效，請嘗試關注
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.cardinalmaritime.com/">Cardinal Maritime</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.php"><font color="">Home</font></a>
</li>
<li><a href="index.php?BookIn"><font color="">Book In</font></a>
</li>
<li><a href="index.php?Measure&Update"><font color="">Measure & Update</font></a>
</li>
<li><a href="index.php?ViewAll"><font color="">Filter/Search</font></a>
</font>
</li>
<li><a href="index.php?Tools"><font color="">Tools</font></a>
</li>
<li><a href="index.php?LoadList_CoLoad"><font color="">Co-Load LoadList</font></a>
</li>
<li><a href="index.php?LoadList_CoLoad"><font color="">Co-Load LoadList</font></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Stock<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="index.php?StockCheck"><font color="">Stock Check</font></a>
</li>
<li><a href="index.php?stockimg"><font color="">Stock Image</font></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
引導導航欄崩潰問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.