Bootstrap Form-Horizo​​ntal Appearance

Question

我仍然是Bootstrap的新手，所以如果我的问题看起来太简单，请原谅我。

我的Bootstrap网页几乎按照我的意愿出现，但是当我更改屏幕尺寸时，布局从OK（电话和平板电脑尺寸）变为Bad（完全桌面尺寸）。

我的代码如下：

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <form class="form-horizontal" role="form">
                <fieldset>

                    <!-- Text input-->
                    <div id="Row1" class="form-group">
                        <label class="col-sm-2 control-label" for="txtDeviceID">Device ID:</label>
                        <div class="col-sm-4">
                            <input id="txtDeviceID" type="text" placeholder="Device ID" class="form-control" runat="server">
                        </div>

                        <label class="col-sm-2 control-label" for="ddlOwnerID">Owner ID:</label>
                        <div class="col-sm-4">
                            <select class="form-control" id="ddlOwnerID"  runat="server">
                            </select>
                        </div>
                    </div>

                    <!-- Text input-->
                    <div id="Row2" class="form-group">
                        <label class="col-sm-2 control-label" for="ddlDevType">Device Type:</label>
                        <div class="col-sm-4">
                            <select class="form-control" id="ddlDevType"  runat="server">
                            </select>
                        </div>

                        <label class="col-sm-2 control-label" for="txtLocation">Location:</label>
                        <div class="col-sm-4">
                            <input type="text" id="txtLocation" placeholder="Location" class="form-control" runat="server">
                        </div>
                    </div>

                    <!-- Text input-->
                    <div id="Row3" class="form-group">
                        <label class="col-sm-2 control-label" for="txtCreditFee">Credit Fee:</label>
                        <div class="col-sm-4">
                            <input type="text" id="txtCreditFee" placeholder="Credit Fee" class="form-control" runat="server">
                        </div>

                        <label class="col-sm-2 control-label" for="txtClosingText">Closing Msg:</label>
                        <div class="col-sm-4">
                            <textarea id="txtClosingText" class="form-control h4" rows="2" runat="server" wrap="off" placeholder="* Closing Msg *" runat="server"></textarea>
                        </div>
                    </div>
                    </fieldset>
                </form>
            </div>   <!-- /.col-lg-12 -->
        </div>  <!-- /.row -->
</div>  <!-- class="container" -->

我的平板电脑“好”屏幕显示如下：

但是当我打开浏览器窗口到全桌面屏幕尺寸时，显示会更改为以下内容，输入字段会重叠标签：

我在我的HTML div中定义了列，我不认为NoWrap在标签上设置为True（虽然我不能确定），但它似乎没有帮助。

• 如何让全屏桌面屏幕看起来很好并保持响应能力，以便更小的屏幕尺寸看起来也不错？
• 我应该在各种CSS文件中查看引入更改的位置？

非常感谢您的建议/意见。

Answer 1

在代码的第3行，您将div类设置为：col-md-4 col-md-offset-4

这意味着您的标记在md尺寸屏幕上占用的列数不会超过4列。

由于您未在类属性中指定xs或sm col值，因此默认为12列，直到您的屏幕大小超过md值为止你的4栏规则发挥作用。