Bootstrap Form-横向外观

Question

我对 Bootstrap 还是很陌生，如果我的问题看起来太简单，请原谅我。

我的 Bootstrap 网页几乎按我想要的方式显示，但是当我更改屏幕大小时，布局从正常（在 phone 和平板电脑大小）变为糟糕（在完整桌面上）尺寸）。

我的代码如下：

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

我的平板"good"出现如下画面：

但是当我打开浏览器 window 到全桌面屏幕大小时，显示会变为以下内容，输入字段会重叠标签：

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

如何使全桌面屏幕尺寸看起来不错并保持响应能力，以便较小的屏幕尺寸也看起来不错？
我应该在各种 CSS 文件中的什么地方进行修改？

您的 suggestions/advice 将不胜感激。

Answer 1

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

这意味着您的标记在 md 大小的屏幕和更大的屏幕上将占用不超过 4 列。

由于您没有在 class 属性中指定 xs 或 sm col 值，它将默认为 12 列，直到您的屏幕尺寸超过 md 您的 4 列规则发挥作用的值。

Bootstrap Form-横向外观

Bootstrap Form-Horizontal Appearance

resize

twitter-bootstrap