Bootstrap 从导航栏右侧调用时模态框不会出现在移动设备上

Question

几天来我一直在为这个问题苦思冥想。

我有一个基于 Bootstrap 3 构建的小型 Web 应用程序。在 navbar-right div 中，我有 "Log In" 和 "Sign Up" 按钮。在台式机和平板电脑上，当用户 taps/clicks 使用这些按钮之一时，会出现相应的模式对话框。

但是，在手机上，当用户与按钮交互时，似乎没有任何反应。我的消息来源如下。

（来自 navbar div 的片段）

    <ul class="nav navbar-nav navbar-right">
        <li><a data-toggle="modal" data-target="#signup-modal">
          <span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a data-toggle="modal" data-target="#login-modal">
          <span class="glyphicon glyphicon-log-in"></span> Log In</a></li>
    </ul>

（注册模式前几行的片段）

    <div id="signup-modal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">

Answer 1

不幸的是，我不知道为什么它无法打开模式，我自己也遇到了同样的问题并尝试研究它。

我的模式在桌面上一直运行良好，但我发现当你 link 像这样：

<a href="#myModal" data-toggle="modal">Modal</a>

在移动设备上点击 3 次后打开（仅当不在导航栏右侧时）。有时1点后打开，但感觉有bug。

然而，当这样尝试时：

<button class="btn btn-xl btn-navbar" data-toggle="modal" data-target="#myModal">Modal</button>

它每次都会起作用。立即，没有延迟。每次使用按钮时都会触发。

我为这个特殊场合所做的是使用一个按钮和一个自定义 class，并适当地设计它的样式，因为我不希望它看起来像导航栏中的一个按钮，我想要它像其他任何东西一样发挥作用 link。

效果很好，试试吧。

Bootstrap 从导航栏右侧调用时模态框不会出现在移动设备上

Bootstrap modals not appearing on mobile when called from navbar-right

html

iphone

modal-dialog

navbar

twitter-bootstrap