Question

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

详细说明：我在.thumbnail和.caption类中使用了引导程序表单。我希望每个表单组都有非常具体的列大小，这就是我使用嵌套网格系统的原因。当我点击一个输入绝对没有任何反应（字面上没有）。但是，当我将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

＆＃13;

<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>

＆＃13;

您的代码似乎工作正常。

Answer 2

我最终弄清楚了解决方法。它不是最好的解决方案，因为它需要一些jQuery / js，并且必须解决html结构的问题。但是，如果其他人遇到与此类似的问题，我想出了一个快速的jQuery解决方法，在每个表单组上放置一个事件来检测点击，然后将子输入置于焦点。

$("#application .form-group").on("click", function() {
  $(this).children('div').children('input').focus();
});

单击时，引导表单输入不允许进行编辑

2 个答案: