1

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

我怎样才能使它看起来像下图（除了标记）并减小输入的宽度？

在此处输入图像描述

4

3 回答 3

2

引导网格

在某些时候，BootStrap 网格系统会尝试折叠这些字段。

有四个网格类：

  • col-xs-*：移动，从不堆叠
  • col-sm-*:平板电脑， 768像素以下的堆栈
  • col-md-*:笔记本电脑，堆栈低于992像素
  • 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 页面上的水平表单。

断点演示

这是通过在1200px处中断来证明您的演示正常工作的证明：

1199 像素：

演示1199

1200 像素：

演示1200

于 2013-09-16T23:20:41.893 回答
0

尝试使用这个 CSS

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

}

.form-group 标签 { 浮动：左 }

小提琴

于 2013-09-16T22:52:36.503 回答
0

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

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

希望这会帮助你。

于 2013-09-17T01:32:55.470 回答