表单输入的宽度（使用col-lg）

Question

使用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/

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

Answer 1

Bootstrap Grid

在某些时候，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。

断点演示

通过打破 1200px ，证明您的演示工作正常：

<强> 1199px ：

<强> 1200像素：

Answer 2

尝试使用此css

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

}

.form-group label {     向左飘浮 }

fiddle

Answer 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;
 }

max-width：输入要设置宽度的值。 height：输入您希望字段高度为的值。

希望这会对你有所帮助。