Question

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

Bootstrap折叠导航栏不会在表设备上崩溃。适用于我的手机和手机浏览器，当我把窗口缩小。在设备上，链接就在彼此之下并堆积起来。

与LINK类似的问题，但我已经尝试了这个并且它没有用。

Answer 1

您是否在页面标题上添加了以下内容？

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

平板电脑设备上的Bootstrap折叠导航栏不会崩溃

1 个答案: