Html 引导程序3:Form"；“必需”；不在移动设备中工作

我正在制作一个我用bootstrap设计的表单，并连接到谷歌文档做了一些小改动。 当我在浏览器和开发人员工具模拟器中测试表单时，它工作得非常好。如果我留下一个空格，一个小弹出窗口会告诉我在继续之前填充该空格，它不会将信息发布到电子表格中，也不会前进到问候页面（预期行为）

然而，当我在iPhone和其他移动设备上测试时，它不起作用。我可以留下空白，它只是简单地忽略了“必需”的条件，并将我带到问候页面

正如你所看到的，这是一个问题。我希望窗体的行为与其在浏览器上的行为相同。有什么想法吗

<!-- Form -->
<div class="col-lg-6 form-container" style="margin-top: 20px; margin-left:-20px">
<script type="text/javascript">var submitted=false;</script>
    <iframe name="hidden_iframe" id="hidden_iframe"
    style="display:none;" onload="if(submitted)
    {window.location='thank-you.html';}"></iframe>
    <form class="form-horizontal" action="https://docs.google.com/a/xxxxxxxx.com/forms/d/1psz4JlSVCmr99r7Qdg0LsV0WJjwzm1aSZBECmWpFX-w/formResponse" method="post"
    target="hidden_iframe" onsubmit="submitted=true;">
<fieldset>

<!-- Form Name -->
<h3 class="centered"><span class="glyphicon glyphicon-ok"></span> Get Your API Key Today</h3>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Full Name">Full Name*</label>  
  <div class="col-md-4">
  <input type="text" name="entry.492241038" value="" class="form-control input-md required" id="entry_492241038" dir="auto" aria-label="1  " aria-required="true" required="" title="">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Company">Company*</label>  
  <div class="col-md-4">
  <input type="text" name="entry.22144039" value="" class="form-control input-md required" id="entry_22144039" dir="auto" aria-label="2  " aria-required="true" required="" title="">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Company Email">Company Email*</label>  
  <div class="col-md-4">
  <input type="text" name="entry.1882859742" value="" class="form-control input-md required" id="entry_1882859742" dir="auto" aria-label="3  " aria-required="true" required="" title="">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Phone Number">Phone Number*</label>  
  <div class="col-md-4">
  <input type="text" name="entry.1063706991" value="" class="form-control input-md required" id="entry_1063706991" dir="auto" aria-label="4  " aria-required="true" required="" title="">

  </div>
</div>

<!-- Textarea -->
<div class="form-group">
  <label class="col-md-4 control-label" for="How will you use the API?">How will you use the API?*</label>
  <div class="col-md-4">                     
  <textarea name="entry.1508475478" rows="3" cols="0" class="form-control input-md required" id="entry_1508475478" dir="auto" aria-label="5  " aria-required="true" required=""></textarea>
  </div>

</fieldset>
<div class="submit-button centered">
    <!-- <input type="submit" name="submit" value="Submit" id="ss-submit"> -->
    <button href="thank-you.html" class="btn btn-info btn-lg btTxt submit" id="ss-submit" name="submit" type="submit" value="Submit"> Get Started Now </button>
</div>
</form>

</div>

var=false；
今天获取API密钥
全名*
公司*
公司电子邮件*
电话号码*
您将如何使用API*
现在就开始吧

您需要将表单包装成一行。看起来您也在尝试将列嵌套到？再次查看网格文档：

---

所需属性未完全工作，您可能需要使用polyfill。如果您使用webshim，则可以使用以下行：

<script src="js/modernizr-custom.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>

<script>

  //request the features you need:
  webshims.polyfill('forms');

</script>

//请求您需要的功能：
webshims.polyfill（“表格”）；

下面是一个包含即时验证的引导示例：

---

尝试连续包装表单，但无效。不过，谢谢你！在这种情况下，使用百分比类或查看列sm-*或列xs-*选项。