2015-10-13 267 views
0

引导崩溃导航栏不垮在平板电脑上

<!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&amp;Update"><font color="">Measure &amp; 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>

引导崩溃的导航栏上不表设备崩溃。当我缩小窗口时,在我的移动&浏览器上正常工作。在设备上,链接只是在彼此的下面堆积起来。

LINK类似的问题,但我试过这个,它没有工作。

enter image description here

+0

就可以完成的代码之后(NAV和DIV),或将其更改为代码片段? – Aroniaina

+0

@Aroniaina为您添加了一个片段 –

+0

@elliestone您的HTML看起来有点混乱。为什么你有三个''结束标签(其中一个在之内)和两个''结束标签? –

回答

3

您是否在Page header上添加了以下内容?

<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&amp;Update"><font color="">Measure &amp; 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> 

+0

我已添加 –

+1

我已更新导航栏,尝试一次。有些东西缺少像“容器流体”而不是“容器”,并且“折叠”类缺失。我认为问题可能是因为你错过了“崩溃” –

+0

我试过了,它看起来更好,但仍然无法正常工作。我已经在上面添加了一张图片来向你展示即将看到的内容。谢谢 –