【问题标题】：Width of form input (using col-lg)表单输入的宽度（使用 col-lg）
【发布时间】：2013-09-24 17:15:03
【问题描述】：

以下表单的宽度在使用 Firefox 时没有得到适当的限制。相反，它跨越了整个屏幕，尽管在 Chrome 中它没有。

<form class="form-horizontal" role="form">
    <legend class="righter">Legend</legend>
    <div class="form-group">
        <label for="title" class="col-lg-2 control-label">Title</label>
        <div class="col-lg-4">
            <input type="text" class="form-control" id="title" placeholder="..." />
        </div>
    </div>
    <div class="form-group">
        <label for="id" class="col-lg-2 control-label">UUID</label>
        <div class="col-lg-4">
            <input type="text" class="form-control" id="description" placeholder="..."/>
        </div>
    </div>
</form>

在 JSFiddle 中，它的行为类似于 Firefox： http://jsfiddle.net/dy5KP/1/

如何使它看起来像下图（除了标记）并减小输入的宽度？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

引导网格

在某些时候BootStrap Grid System 会尝试折叠字段。

有四个网格类：

col-xs-*：移动，从不叠加
col-sm-*：平板电脑，堆栈低于 768 px
col-md-*：笔记本电脑，堆栈低于 992 px
col-lg-* : 桌面，堆栈低于 1200 px

在 jsFiddle 中查看代码时的部分问题是您可以查看的空间更少。当我在 Firefox 中打开您的代码并将 /show 附加到小提琴名称时，我可以通过使屏幕宽于 1200 像素来获得正确的行为。 图片见文章底部

解决方案

一种解决方案是通过从上面的列表中选择一个较小的网格列来缩小断点。

<div class="form-group">
    <label for="title" class="col-xs-2 control-label">Title</label>
    <div class="col-xs-4">
        <input type="text" class="form-control" id="title" placeholder="..." />
    </div>
</div>

这是一个小提琴：jsFiddle

在任何屏幕宽度下都将如下所示：

有关更多信息，您可以查看 Bootstrap CSS 页面上的Horizontal Forms。

断点演示

以下证明您的演示在 1200 像素处中断时可以正常工作：

1199 像素：

1200像素：

【讨论】：

【解决方案2】：

尝试使用这个 css

.form-group input {
width: 180px;
float: right;
margin-right: 150px

}

.form-group 标签 { 向左飘浮 }

fiddle

【讨论】：

您可以使用 native 引导类来做到这一点，所以我建议尽可能避免使用自定义代码

【解决方案3】：

在 Bootstrap 中处理表单的最佳方法是使用 max-width 作为您想要的宽度，所以这是您需要做的：

1- 继续使用您的代码，但更改 col-lg-2 和 col-lg-4

仅限col-lg

2- 在您的 css 文件中 ---- 到针对表单的类，或者围绕您的表单进行潜水，或者简单地这样做：

.form-group input {
   display: block;
   max-width: 180px;
   vertical-align: middle;
   height: 45px;
   margin: 5px auto;
   padding: 10px 20px;
 }

最大宽度： 输入您要设置宽度的值。 高度：输入您希望字段高度的值。

希望这会对你有所帮助。

【讨论】：