Question

我建立了一个在线访谈。该表单使用Angular.js和Bootstrap来显示问题和答案。每个答案都附加到一个点值，该点值在测试分数的最后得到总和并总计。

该应用程序在Chrome和Safari（两种桌面应用程序）上运行得非常好，而在Chrome Dev Tools中，它可以很好地模拟多种移动屏幕。但是，当我在实际的移动设备上查看应用程序时，我无法在单选按钮中选择答案。我该怎么做才能调试？

Angular.js可能是原因吗？也许这是Bootstrap的一个已知问题？我该如何排除故障并进行维修？

直播网站（目前在桌面上工作（2016年4月7日），但不在移动设备上）： http://libertas-security466.info/interview

test.html（每个问题/答案集的模板）

<div class="container">
    <div class="row">

        <div class="col-sm-12">
            <h1>{{question.text}}</h1>
            <p ng-show="question.subtext">{{question.subtext}}</p>
        </div>
        <div class="col-sm-12">
            <p>Remaining Questions: {{questionsLeft}}</p>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <form class="form">
                <div class="form-group">
                    <div class="input-group" ng-repeat="answer in question.answers">
                        <div class="input-group-addon">
                            <input type="radio" name="radioGroup" ng-model="selectedAnswer" value="{{answer.text}}" ng-click="setCurrentAnswer(answer)">
                        </div>
                        <label class="form-control">
                            {{answer.text}}
                        </label>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-xs-12">&nbsp;</div>
        <div class="col-sm-3 col-sm-offset-9 text-center">
            <button ng-click="answer(currentAnswer)" class="btn btn-large btn-primary">Select Answer</button>
        </div>
    </div>
</div>

的index.html

<!DOCTYPE html>
<html ng-app="FreemasonTest">
    <head>
        <title>Are you ready?</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="lib/jquery-ui-1.11.4/jquery-ui.min.css" type="text/css" />
        <link rel="stylesheet" href="lib/bootstrap-3.3.6-dist/css/bootstrap.min.css" type="text/css" />
        <script type="text/javascript" src="lib/jquery/jquery-2.2.2.min.js"></script>
        <script type="text/javascript" src="lib/jquery-ui-1.11.4/jquery-ui.min.js" ></script>
        <script type="text/javascript" src="lib/angular/angular.min.js"></script>
        <script type="text/javascript" src="lib/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script> 
        <script type="text/javascript" src="javascript/app.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="javascript/routes.js"></script>
    </head>
    <body>
        <script type="text/javascript" src="javascript/model/AssessmentModel.js"></script>
        <script type="text/javascript" src="javascript/questions.js"></script>
        <script type="text/javascript" src="javascript/needs.js"></script>
        <script type="text/javascript" src="javascript/controllers/TestController.js"></script>
        <script type="text/javascript" src="javascript/controllers/ResultsController.js"></script>
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                        <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="index.html">Libertas-Security Lodge #466</a>
                </div>
            </div>
        </nav>
        <div ng-view></div>
    </body>
</html>

Answer 1

@KieranDotCo提供了我需要的方向。该问题的解决方案分为两部分：

如何解决问题？
出了什么问题？

==疑难解答==

developers.google.com/web/tools/chrome-devtools/debug/…处的说明提供了查找和追踪解决方案所需的一切。

==让应用程序工作==

问题不在于Angular.js。它在技术上也不是Bootstrap，但是Bootstrap CSS导致了这个问题。

我让默认列定义为XS屏幕尺寸定义按钮div。在Chrome调试器（下图）中，我们会看到包含<div>元素的<button>用于选择答案，其尺寸使其高于我的单选按钮。这意味着每次我尝试点击一个单选按钮时，＆＃34;选择答案＆＃34;周围的空白区域。按钮抓住了我的事件，并在单选按钮周围将它冒泡到了身后的身体元素。

在上图中，我们看到当我们选择应该覆盖按钮的<div>元素时，我们只选择了一个按钮，我们在单选按钮前面有一个突出显示的区域。

问题的答案在于更改此div的类以指定XS屏幕的行为。在我添加＆＃34; col-xs-12＆＃34;对于按钮div，div不再位于单选按钮的前面，我可以根据需要选择选项。

在上图中，我们像以前一样突出显示<div>，但现在我们看到div不大于包含<button>的行。＆＃34; col-xs-12＆＃34;课程＆＃39;固定＆＃39; <div>尺寸以及应用

==谢谢你== 非常感谢@KieranDotCo教我Google Chrome桌面应用程序的这一重要功能。你为我打开了一个全新的调试世界！

为什么单选按钮无法在移动设备上运行？

1 个答案: