无法点击平板电脑/手机宽度的输入

Question

我在为一个朋友创建的网站上遇到了一个问题，这让我有点困惑。全面披露我之前选择了一个主题，以启动一切，因为这是一个免费项目。

问题是，有些东西使我无法在较小的断点处选择单行输入。文本区域似乎工作正常。

我设置了代码笔(http://codepen.io/misterhamm/pen/BoXZZy)。以下代码：

<form class="contact-comments m-top-50" id="contact-form">
   <div class="row">
       <div class="col-xs-12 col-md-6 form-group">
          <!-- Name -->
          <input type="text" name="name" id="name" class=" form-control" placeholder="Name *" maxlength="100" required="">
       </div>
       <div class="col-xs-12 col-md-6 form-group">
          <!-- Email -->
          <input type="email" name="email" id="email" class=" form-control" placeholder="Email *" maxlength="100" required="">
       </div>

       <div class="form-group col-xs-12 col-md-6">
          <!-- Phone -->
          <input type="text" name="phone" id="phone" class=" form-control" placeholder="Phone" maxlength="100">
       </div>
       <div class="form-group col-xs-12 col-md-6">
          <!-- Subject -->
          <input type="text" name="company" id="company" class=" form-control" placeholder="Company" maxlength="100">
       </div>
       <!-- Comment -->
       <div class="form-group col-md-12">
          <textarea name="comments" id="comments" class="cmnt-text form-control" rows="6" placeholder="Comments" maxlength="400"></textarea>
       </div>
       <!-- Send Button -->
       <div class="form-group col-md-12">
          <button type="submit" class="btn btn-small btn-dark-solid contact-submit">Send Message</button>
       </div>

Answer 1

您需要将col-xs-12类添加到注释和按钮的div中，即.

您需要更改以下

<!-- Comment -->
<div class="form-group col-md-12">
...
...
<!-- Send Button -->
<div class="form-group col-md-12">

到这个代码

<!-- Comment -->
<div class="form-group col-md-12 col-xs-12 ">
...
... 
<!-- Send Button -->
<div class="form-group col-md-12 col-xs-12 ">

我不知道这个html和css实际上是如何工作的，但在进行了前面提到的更改