modal画面上のボタンが,とある幅だと機能しない(解決)

発覚

同じ開発チームの人からログイン画面のログインがクリックしても反応しないという連絡を受けて、自分の環境で検証したが再現しなかった。
その画面の一部を作ったのは私だが、そんなdisabled仕込んでないぞ？と思って不思議に思っていた。

そしたら別の人も再現し、現象が判明した。

現象

環境は、
Bootstrap3
Google Chrome
で発生。

入り口の画面にあるログインボタンをクリックするとmodalでログイン画面を出し、二枚のdivを使ってログインとサインアップを兼用していた。

<div class="container">
  <form >
    <button data-target="#login" data-toggle="modal" 
         onclick="$('#signup').hide(); $('#login').show()" type="button">
    Log in</button>
  </form>

  <!-- ログイン -->
  <div aria-hidden="true" id="login" tabindex="-1" style="display: none;">
      <div class="modal-dialog">
        <modal-content>
              (省略)
          <form action="login" method="post">
            <div class="col-sm-12">
              <div class="row">
                <div class="col-xs-4">
                  <button class="btn btn-primary" id="btn-login" type="submit">Log In</button>
                </div>
              </div>
            </div>
          </form>
          (省略)

  <!--　サインアップ -->
  <div id="signup" style="display: none;">
          (省略)

ところが、幅が890pxあたりになると急にLog Inボタンが機能しなくなる。
その前後の幅では問題なくログインできる。
表示幅のデザインが変わってから押せなくなるので、幅が切り替わった時に何か悪さをしているのかと思いきや、下部にあるdivのサインアップ側は正常に機能している。
サインアップ側は項目数などデザインは多少変わるが、ボタン周りはログインと同じ。
なぜログインは押せなくなるのか理由がわからないが、いろいろ調査したら原因が分かった。

原因

<div class="col-sm-12">

よく使うこれ。
これを外すとボタンが機能する。
原因がわからないのでどなたかご存知だったら教えて下さい。

ひとりごと：
メイン画面の幅とmodal側の幅が違うタイミングで幅が変わるのが悪さしてるのかも。
見た目は正常機能時と変わってないけど、modalの幅が変わったタイミングで実はformの外にボタンが飛び出してるんじゃないかという疑惑があったりなかったり。(未確認)

追記：
原因判明。
rowタグが一個足りなかったYO!

  <!-- ログイン -->

              (省略)
          <form action="login" method="post">
     これ→<div class="row">
            <div class="col-sm-12">
              <div class="row">
                <div class="col-xs-4">
                  <button class="btn btn-primary" id="btn-login" type="submit">Log In</button>
                </div>
              </div>
            </div>
           </div>
          </form>
          (省略)