css - Bootstrap 表单输入不允许在单击时进行编辑

Question

问题:我的引导表单不允许编辑。

详细信息:我在 .thumbnail 和 .caption 类中使用 Bootstrap 表单。我想为每个表单组设置非常具体的列大小，这就是我使用嵌套网格系统的原因。当我点击一个输入时，绝对没有任何反应(实际上什么都没有)。但是，当我将 jQuery 事件监听器连接到输入时，事件确实会触发。为什么我的表单似乎无法编辑？先感谢您!

<div class="thumbnail">
  <div class="col-xs-10 col-centered">
    <h3 id="application-type">Web Development Application</h3>
    <hr>
  </div>
  <div class="caption row">
    <form class="col-xs-12" method="post">
      <div class="form-group row">
        <label for="first-name" class="col-sm-3 col-form-label"><strong>First Name</strong></label>
        <div class="col-sm-9">
          <input id="first-name" type="text" class="form-control" placeholder="John">
        </div>
      </div>
      <div class="form-group row">
        <label for="last-name" class="col-sm-3 col-form-label"><strong>Last Name</strong></label>
        <div class="col-sm-9">
          <input id="last-name" type="text" class="form-control" placeholder="Doe" />
        </div>
      </div>
      <div class="form-group row">
        <label for="apply-email" class="col-sm-3 col-form-label"><strong>Email Address</strong></label>
        <div class="col-sm-9">
          <input id="apply-email" type="email" class="form-control" placeholder="johnnyappleseed@gmail.com" />
        </div>
      </div>
      <div class="form-group row">
        <label for="linked-in" class="col-sm-3 col-form-label"><strong>LinkedIn</strong></label>
        <div class="col-sm-9">
          <input id="linked-in" type="text" class="form-control" placeholder="mylinkedIn.com" />
        </div>
      </div>
      <div id="show-portfolio" style="display: none;" class="form-group row">
        <label for="portfolio" class="col-sm-3 col-form-label"><strong>Portfolio</strong></label>
        <div class="col-sm-9">
          <input id="portfolio" type="text" class="form-control" placeholder="mylinkedIn.com" />
        </div>
      </div>
      <div class="form-group row">
        <label for="apply-file-btn" class="col-sm-3 col-form-label"><strong>CV</strong></label>
        <div class="col-sm-9">
          <ul class="file-btn-group">
            <li>
              <span class="btn btn-primary btn-file">
                                Upload <input class="form-control" type="file">
                            </span>
            </li>
            <li class="file-name">
              <span>No file chosen...</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-sm-12">
          <button type="submit" class="submit-btn col-sm-4 col-sm-offset-8 btn btn-success btn-mini">Submit!</button>
        </div>
      </div>
    </form>
  </div>
</div>

Answer 1

<div class="thumbnail">
  <div class="col-xs-10 col-centered">
    <h3 id="application-type">Web Development Application</h3>
    <hr>
  </div>
  <div class="caption row">
    <form class="col-xs-12" method="post">
      <div class="form-group row">
        <label for="first-name" class="col-sm-3 col-form-label"><strong>First Name</strong></label>
        <div class="col-sm-9">
          <input id="first-name" type="text" class="form-control" placeholder="John">
        </div>
      </div>
      <div class="form-group row">
        <label for="last-name" class="col-sm-3 col-form-label"><strong>Last Name</strong></label>
        <div class="col-sm-9">
          <input id="last-name" type="text" class="form-control" placeholder="Doe" />
        </div>
      </div>
      <div class="form-group row">
        <label for="apply-email" class="col-sm-3 col-form-label"><strong>Email Address</strong></label>
        <div class="col-sm-9">
          <input id="apply-email" type="email" class="form-control" placeholder="johnnyappleseed@gmail.com" />
        </div>
      </div>
      <div class="form-group row">
        <label for="linked-in" class="col-sm-3 col-form-label"><strong>LinkedIn</strong></label>
        <div class="col-sm-9">
          <input id="linked-in" type="text" class="form-control" placeholder="mylinkedIn.com" />
        </div>
      </div>
      <div id="show-portfolio" style="display: none;" class="form-group row">
        <label for="portfolio" class="col-sm-3 col-form-label"><strong>Portfolio</strong></label>
        <div class="col-sm-9">
          <input id="portfolio" type="text" class="form-control" placeholder="mylinkedIn.com" />
        </div>
      </div>
      <div class="form-group row">
        <label for="apply-file-btn" class="col-sm-3 col-form-label"><strong>CV</strong></label>
        <div class="col-sm-9">
          <ul class="file-btn-group">
            <li>
              <span class="btn btn-primary btn-file">
                                Upload <input class="form-control" type="file">
                            </span>
            </li>
            <li class="file-name">
              <span>No file chosen...</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-sm-12">
          <button type="submit" class="submit-btn col-sm-4 col-sm-offset-8 btn btn-success btn-mini">Submit!</button>
        </div>
      </div>
    </form>
  </div>
</div>

您的代码似乎运行良好。