クリックしたときにブートストラップフォーム入力が編集できない

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

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

私は回避策を見つけ出しました。それはいくつかのjQuery/jsを必要とし、html構造の問題を回避する方法がなければならないので、最良の解決策ではありません。しかし、他の誰かがこのような問題に遭遇した場合は、jQueryのすばやい解決策を思いつき、各フォームグループにイベントを配置してクリックを検出し、子の入力にフォーカスを合わせます。

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