Question

我开始研究Bootstrap以使我的表单响应。我想从数据源生成它们，并使用所有空间将每个控件放在页面上。我得到了类似于我想要的东西，具有响应式设计，但我使用的是class="row"，当div在同一行上具有不同的高度时，它给了我一些空格。是否可以使用其他可以删除它们的东西，如果可能的话，还可以使用对齐的控件来移除大部分空白区域？

这是我用于测试的完整代码：

<html>
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>

<body>
    <br/>
    <div class="row">
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="email" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="">
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="message" class="col-sm-2 control-label">Message</label>
                <div class="col-sm-10">
                    <textarea class="form-control" rows="4" name="message"></textarea>
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="email" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="">
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="message" class="col-sm-2 control-label">Message</label>
                <div class="col-sm-10">
                    <textarea class="form-control" rows="4" name="message"></textarea>
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="email" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="">
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="message" class="col-sm-2 control-label">Message</label>
                <div class="col-sm-10">
                    <textarea class="form-control" rows="4" name="message"></textarea>
                </div>
            </div>
            <div class="form-group col-sm-6 col-lg-4 col-xl-3">
                <label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
                </div>
            </div>
    </div>
    </div>
</body>
</html>

您可以在第1行（消息标签的左侧）看到一些空格，因为Message Div的高度不同。
您还可以在第3行看到这个奇怪的空格，其中一个完整的列为空。当它上面的标签有第二行（2+3=?，其中?出现在第二行时）似乎会发生这种情况。如果我拖动窗口足够大以使标签在一行上，则问题就消失了。不过，这种情况会发生，我不希望它产生问题。
这个与空白无关（一个额外的问题）。我需要能够调整文本区域的大小，并且调整大小操作应该将其他div移开，而不是将它们放在当前文本区域的顶部...当我将区域拖到底部时这已经有用了（向下），但不在右边。

您是否知道如何解决上面列出的问题（要点）？

更新

对于上面的屏幕，我希望它显示的方式（项目的顺序可能不同）在下面的屏幕中显示。正如您所看到的，我希望事物在行中保持对齐，而减少空白区域。较小的项组合在同一行的同一列中以适合空白空间，就像行可以具有特定列的嵌套行一样。尽管如此，如果两个较小的物品不能放入空间内，则不应放在那里，因为我想保留内容。例如，如果“name”和“email”不能适合“message”的高度，那么我应该具有与之前相同的布局（仅在第一行中为“name，email，message”）。项目的数量和类型是变量（取决于表单）。此外，重要的是表单保持响应屏幕大小更改和垂直调整大小（现在是），所以如果我减小大小或放大文本区域，列数仍然需要更改和相同类型的布局应该看到较少的列。

我还要补充一点，我的项目（不论类型）需要像这样显示：

["centered label" "input field"]

然后可以堆叠它们，仍保持相同的绝对顺序（至少大部分顺序）。重要的是我需要这些项目的组，包括响应标签和输入。

UPDATE2

这是另一张代表同样问题的图片。我使用了与以前相同的代码，但使用了其他一些控制器。我用红色箭头标记了空白不应该出现的斑点。这次表单项的html是从数据源（代表我的目标）生成的。

Answer 1

对于您的第一个问题，您可以在每三个表单组之间使用<div class="clearfix">。 clearfix将清除间距并重置下一行。此解决方案也将帮助您解决第二个问题。如果您还希望此功能适用于sm和xl，请使用隐藏在特定浏览器上的不同.clearfix div，如下所示：<div class="clearfix hidden-sm"></div>。

http://www.bootply.com/KxONBlaNXJ

Answer 2

您可以在第1行（消息标签的左侧）看到一些空格，因为消息Div具有不同的高度。

间距问题的主要原因与div.form-groups的不同高度有关。

示例：在屏幕截图中，＆＃34;第一行＆＃34;的高度几乎是由消息div的高度定义的。

Masonry.js是关于这一点的一种方式 - refer to this previous question可以获得由原始海报制作的关于砌体可以做什么（以及链接到砌体）的漂亮视觉效果。

您还可以在第3行看到这个奇怪的空格，其中一个完整的列为空。当它上面的标签有第二行（2 + 3 =？，其中？出现在第二行）时，似乎会发生这种情况。如果我拖动窗口足够大以使标签在一行上，则问题就消失了。不过，这种情况会发生，我不想让它产生问题。

那个挑剔的 2 + 3 =？确实是＆＃34;声称＆＃34;你现在拥有的那个空间，从而将整个列推到下一个div。所以另一个高度问题如上所述，砌体是另一种方式。

这个与空白无关（一个额外的问题）。我需要能够调整文本区域的大小，并且调整大小操作应该将其他div移开，而不是将它们放在当前文本区域的顶部...当我将区域拖到底部时这已经有用了（下），但不是右边。

我可以指向this bootply example，其中显示了如何禁用调整大小。

对于你的观点，当你向下＆＃34;向下＆＃34;时，高度会调整，后面的div会做出相应的反应（与上面类似的主题）。您可以向右拖动，因为您已经应用了 col-sm-6 col-lg-4 col-xl-3 ...即宽度是通过Bootstrap控制的，您不能只需拖动textarea就可以改变它。

编辑 - 我刚刚注意到了@ CBroe的评论，我喜欢那种仅限CSS的解决方案。唯一值得注意的是我可能不会直接修改bootstrap -col - 类。我只是应用一个新的类名并从那里播放:)

Answer 3

大纲col-*-*和标签中都有<div> - 是否有意嵌套？如果是这样，那么子巢需要它自己的.row ...见http://getbootstrap.com/css/#grid-nesting
在col-*-*＆amp;中使用<input> <textarea>分配宽度...请参阅http://getbootstrap.com/css/#form-control-column-sizing，向下滚动到列大小调整

删除引导程序表单中的空格

3 个答案: