Bootstrap 3输入在桌面模式下为只读，但在小型设备上则为只读 [英] Bootstrap 3 inputs read-only in desktop mode but not on small devices

问题描述

我在boostrap 3上遇到问题，导致在桌面模式下停用/只读输入.将浏览器窗口调整为较小的大小后，引导程序将激活输入以进行读写.我不知道为什么，当然应该在所有设备上激活它们.任何帮助将不胜感激！

I am having trouble with boostrap 3 causing deactivated/read-only inputs in desktop mode. Once you resize the browser window to a smaller size bootstrap activates the inputs to read-write. I am clueless why, of course they should be activated on all devices. Any help will be appreciated!

我尝试让.form-group围绕.col-sm-x .col-md-x .col-lg-x div和其他一些调整，仅当输入完全位于.col-sm-x .col-md-x .col-lg-x之外时，输入才启用，这会破坏布局.有什么方法可以使此布局在bs3中工作?

I tried having the .form-group arround the .col-sm-x .col-md-x .col-lg-x divs and a few other tweaks, the inputs only enable once they are completely outside of the .col-sm-x .col-md-x .col-lg-x, which destroys the layout. Is there any way of making this layout work in bs3?

这是一个小提琴，问题出现在Safari，Firefox和Chrome:

Here's a fiddle, problem shows up in Safari, Firefox and Chrome:

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

表单代码看起来像这样，我对bs3表单和网格不是很熟悉，也许有人可能会发现问题:

The form code looks like this, I am not so familiar with bs3 forms and grid, maybe someone might spot the problem:

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

推荐答案

未禁用它们.问题是您要嵌套class="row".您可以通过打开浏览器的网络工具进行验证，您会看到包含文本区域的行与文本框重叠.

They're not disabled. The problem is that you're nesting class="row". You can verify this by opening your browser's web tools, you'll see that the row containing the textarea overlaps the textboxes.

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

应该成为

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

还有

    </div>
</form>

应该成为

</form>

这篇关于Bootstrap 3输入在桌面模式下为只读，但在小型设备上则为只读的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！