【问题标题】:Bootstrap work on computer browser but doesn't work on mobile browserBootstrap 在计算机浏览器上工作,但在移动浏览器上不起作用
【发布时间】:2017-10-24 18:57:17
【问题描述】:

我的网站使用引导程序,切换按钮在计算机浏览器上有效,但在移动浏览器上无效

这是代码:

 <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/bootstrap-multiselect.css">
    <link href="css/bootstrap-select.min.css" rel="stylesheet" />
    <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://rawgit.com/trentrichardson/jQuery-Timepicker-Addon/master/dist/jquery-ui-timepicker-addon.min.css">
    <link href="css/lightbox.css" rel="stylesheet" />
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"  />

    <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar4">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          <a class="navbar-brand" href="main.php"><img src="img/t-square-logo-Final.png" alt="T-square" class="tslogo"/></a>
        </div>
        <div id="navbar4" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="main.php">Home</a></li>
          <li><a href="dms.php">DMS</a></li>
          <li><a href="main.php?action=backup">Backup</a></li>
          <li><a href="logout.php">LogOut</a></li>
        </ul>
      </div>
      </div>
    </nav>

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

我尝试像here 但是我还是有同样的问题

任何人都可以帮助解决我的问题??

【问题讨论】:

  • 如果您已经添加了正确的元视口,那么您可以发布您的整个代码,以便我们准确了解发生了什么
  • @HisPowerLevelIsOver9000 请查看上方
  • @HisPowerLevelIsOver9000 我通过将文件 bootstrap.min.js 更改为 bootstrap.js 来解决我的问题
  • 很高兴你把它修好了!

标签: javascript jquery html css twitter-bootstrap


【解决方案1】:

将其添加到标题

<meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】:

  • 感谢您的回答,但我的标题中有此代码
【解决方案2】:

您的脚本:bootstrap.min.js 未加载。当我在我的项目中删除此文件时,切换按钮停止工作。

您能否验证您的文件是否正确加载?

【讨论】:

  • 这个。有时 .min 文件不存在只是因为 IntelliSense 为其提供了建议。
  • @Xariez 这就是为什么我不使用代码完成 ;)
  • @Xariez 我通过将文件 bootstrap.min.js 更改为 bootstrap.js 来解决我的问题
  • 不得不承认,它有时真的很方便;)无论如何,很高兴你把它修好了,应该接受这个作为答案,这样我们就知道它已经修好了! @mohamadmohamad
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-11-13
  • 2014-09-26
  • 1970-01-01
  • 1970-01-01
  • 2013-06-15
  • 1970-01-01
相关资源
最近更新 更多