2015-10-13 167 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

我試過了,它看起來更好,但仍然無法正常工作。我已經在上面添加了一張圖片來向你展示即將看到的內容。謝謝 –