html - Bootstrap 折叠导航栏不会在平板设备上折叠

标签 html css twitter-bootstrap 

<!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 类似的问题但我已经试过了，但没有用。

enter image description here

最佳答案

您是否在页眉上添加了以下内容？

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

关于html - Bootstrap 折叠导航栏不会在平板设备上折叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33098153/

上一篇：html - 第一个 child 和最后一个 child 在不同的容器中

下一篇：javascript - 隐藏部分 map

相关文章：

html - 如何根据屏幕尺寸调整 Bootstrap 列的大小和重新排序

javascript - 使用 Bootstrap 展开全部和折叠所有按钮

javascript - 为必须以 3 个字母作为前缀的数字创建模式，例如 (IKA111111)

javascript - Javascript HTML5播放器-添加停止

html - 我可以强制 html 元素呈现特定的媒体大小吗？

css - 如何根据内容的长度限制 <h1> - <h5> 标签的宽度

jquery - 如何使固定顶部 Bootstrap 菜单背景只粘在右边或左边？

html - 无法弄清楚如何摆脱白色背景

jquery - 如何减小 jQuery UI 选项卡面板标题中的字体大小？

html - CSS背景和正文高度100%

©2024 IT工具网  联系我们