html - Bootstrap 3 输入在桌面模式下是只读的，但在小型设备上不是

Question

我在使用 boostrap 3 时遇到问题，导致在桌面模式下停用/只读输入。一旦您将浏览器窗口的大小调整为更小的尺寸，bootstrap 就会激活输入以进行读写。我不知道为什么，当然应该在所有设备上激活它们。任何帮助将不胜感激!

我尝试让 .form-group 包围 .col-sm-x .col-md-x .col-lg-x div 和其他一些调整后，输入仅在它们完全位于 .col-sm-x .col-md-x .col-lg-x 之外时才启用，这会破坏布局。有什么方法可以使这种布局在 bs3 中起作用吗？

这是一个 fiddle ，问题出现在 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>

Answer 1

他们没有被禁用。问题是您正在嵌套 class="row"。您可以通过打开浏览器的网络工具来验证这一点，您会看到包含文本区域的行与文本框重叠。

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

应该变成

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

和

    </div>
</form>

应该变成

</form>