2

デスクトップ モードで入力が非アクティブ/読み取り専用になる原因となる、boostrap 3 に問題があります。ブラウザー ウィンドウのサイズを小さいサイズに変更すると、ブートストラップによって入力がアクティブになり、読み書きできるようになります。もちろん、すべてのデバイスでアクティブにする必要がある理由はわかりません。どんな助けでも大歓迎です！

.form-groupdiv の周囲と他のいくつかの微調整を試み.col-sm-x .col-md-x .col-lg-xました。入力は、完全に の外側にある場合にのみ有効になり.col-sm-x .col-md-x .col-lg-x、レイアウトが破壊されます。このレイアウトを bs3 で機能させる方法はありますか?

問題は Safari、Firefox、および Chrome で発生します。

http://jsfiddle.net/Au5vM/3/

フォーム コードは次のようになります。私は bs3 フォームとグリッドにあまり詳しくありません。誰かが問題を発見するかもしれません。

<form class="form-horizontal" role="form">
    <div class="row">
        <div class="col-sm-2 col-md-2 col-lg-2">
            <div class="form-group">
                <label for="inputAcademicTitle">Degree</label>
                <input type="text" class="form-control" id="inputAcademicTitle" placeholder="Titel" value="Resizing causes me to disable">
            </div>
        </div>
        <div class="col-sm-1 col-md-1 col-lg-1"></div>
        <div class="col-sm-4 col-md-4 col-lg-4">
            <div class="form-group">
                <label for="inputFirstName">First name</label>
                <input type="text" class="form-control" id="firstName" placeholder="Your first name" value="Resizing causes me to disable">
            </div>
        </div>
        <div class="col-sm-1 col-md-1 col-lg-1"></div>
        <div class="col-sm-4 col-md-4 col-lg-4">
            <div class="form-group">
                <label for="inputLastName">Last name</label>
                <input type="text" class="form-control" id="lastName" placeholder="Your last name" value="Resizing causes me to disable">
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12">
                <div class="form-group">
                    <label for="inputMotto">Comment</label>
                    <textarea class="form-control" rows="3" id="motto" placeholder="Your comment">textareas are not affected</textarea>
                </div>
            </div>
        </div>
    </div>
</form>
4

1 に答える 1

2

それらは無効ではありません。問題は、ネストしていることですclass="row"。これは、ブラウザの Web ツールを開くことで確認できます。テキストエリアを含む行がテキストボックスと重なっていることがわかります。

</div>
<div class="row">

なるべき

    </div>
</div>
<div class="row">

と

    </div>
</form>

なるべき

</form>
于 2013-09-13T07:02:19.633 に答える