相关疑难解决方法(0)

Bootstrap折叠菜单链接不适用于移动设备

我在导航栏中使用带有子菜单项的可折叠菜单.菜单在窄显示屏上正确折叠,子菜单项正确显示.

但是,当我在移动设备上单击子菜单项时,该链接不起作用.相反,子菜单会折叠,并且突出显示折叠菜单上的顶部菜单项,就好像子菜单从未打开过,并且"点击"通过它进入下面的元素.

当我在桌面浏览器上测试页面时,一切正常.

我已经定制了一些引导样式,但主要用于颜色等.

有任何想法吗?TIA.

javascript responsive-design twitter-bootstrap

15
推荐指数
1
解决办法
4万
查看次数

Twitter Bootstrap(v2.2.1)下拉链接无法在移动设备上运行

我有一个Twitter Bootstrap(v2.2.1)可折叠的导航栏和下拉按钮.他们在我的桌面浏览器中工作得非常愉快和快乐,如果我将桌面浏览器窗口缩小到移动尺寸,他们也会愉快地工作.

但是,在移动设备上,当您单击下拉列表时,下拉列表将会打开,但单击下拉列表中的任何链接只会导致下拉列表关闭而不会关注该链接.

这似乎与其他SO问题类似,但解决方案是将其移动data-toggle="dropdown"到我已经拥有它们的地方.

这是下拉按钮页面上的html:

<html>
<head>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
</head>
<body>
<div class="btn-group">
    <a class="btn btn-primary" href="link1.php">
        Dropdown button
    </a>
    <a class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li class="nav-header">Recent</li>
        <li><a href="http://google.com">Google</a></li>
        <li><a href="http://bing.com">Bing</a></li>
    </ul>
</div>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script type="text/javascript">
    /**
     * Twitter Bootstrap JQuery
     */
    //!function ($) {
        $(function () {
            $('.dropdown-toggle').dropdown();
        });
    //}
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

我在移动Opera,移动Firefox和默认的android浏览器的Android手机上测试了它.

在此输入图像描述

javascript mobile jquery twitter-bootstrap

5
推荐指数
1
解决办法
7431
查看次数

Bootstrap 3.3.5 - 导航栏切换按钮在 iphone 上不起作用

我正在一个引导站点上工作,在我的 iphone 和 ipad 上查看时,我的导航栏切换出现问题。下拉按钮可见,但不响应或展开。似乎在我所有计算机的浏览器中都运行良好。

我正在使用引导程序 v3.3.5 和 jquery-1.11.3

<head>

    <!-- Website Title & Description for Search Engine purposes -->
    <title></title>
    <meta name="description" content="">

    <!-- Mobile viewport optimized -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Bootstrap CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap/fonts/bootstrap-glyphicons.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="includes/css/styles.css" rel="stylesheet">
    <link href="includes/css/fonts.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Arvo' rel='stylesheet' type='text/css'>

    <!-- Include Modernizr in the head, before any other Javascript -->
    <script src="includes/js/modernizr-2.6.2.min.js"></script>

</head> 
Run Code Online (Sandbox Code Playgroud)

这是我的导航栏

<!--Navbar-->
<div class="navbar" role="navigation">
    <div class="container"> …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery twitter-bootstrap

5
推荐指数
1
解决办法
6625
查看次数