Twitter bootstrap 引导形成水平外观

我对Bootstrap还很陌生，所以如果我的问题太简单，请原谅我

我已经得到了我的引导网页几乎出现我想要的，但当我改变屏幕大小的布局从OK（在手机和平板电脑大小）到坏（在全桌面大小）

我的代码如下：

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

设备ID:
所有者ID：
设备类型：
地点：
信贷费用：
结束消息：

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

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

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

• 我如何才能使整个桌面的屏幕尺寸看起来很好，并保持响应能力，使较小的屏幕尺寸看起来也很好
• 在各种CSS文件中，我应该在哪里查找以引入更改

---

非常感谢您的建议。

在代码的第3行，您将div类设置为：

col-md-4 col-md-offset-4

这意味着您的标记将在

md

size屏幕和更大屏幕上占据不超过4列的空间

---

由于您没有在class属性中指定

xs

或

sm

列值，因此默认为12列，直到屏幕大小超过

md

值，您的4列规则才会生效。

谢谢您的回复。我明白你指的是什么，但是，作为一个引导新手，我不明白我需要做什么。一方面，你说“你的标记在md大小的屏幕上最多只占3列，并且更大”，然后你说“因为你没有在类属性中指定xs或sm col值，它将默认为12列”，那么它是3列宽还是12列宽？更重要的是，我该怎么解决这个问题呢？对不起，我原来打错了。由于您使用的是col-md-4，因此在md大小或更大的屏幕上，您的div占用的列数不会超过4列。查看文档中的引导网格系统，以帮助您可视化事物。尝试将col-md-4类更改为col-md-8。这将使您的列跨越8列，而不是md或以上屏幕尺寸的4列