Bootstrap 网格单元高度打破了环绕答案

【问题标题】：Bootstrap grid cell height breaks wrappingBootstrap 网格单元高度打破了环绕
【发布时间】：2018-08-03 12:06:32
【问题描述】：

我正在尝试使用 Bootstrap 制作响应式表单，但“单元格”（Bootstrap 网格元素）高度破坏了行对齐。而且由于这应该是响应式的，我认为我不能定义 <div class="row"> 来强制一个新行（因为我不知道这些行将是什么）。

在大多数情况下，输入高度大于标签并且没有问题，但如果标签绕到第二行，它的高度就会大于输入，并且下一行网格元素从那里开始。

有没有办法解决这个问题？我已经搜索并只找到了固定高度的行（有时称为固定高度的列），但这些似乎是黑客行为，并且浏览器并不普遍支持。当然，我还没有找到一种 Bootstrap 方法来执行此操作。

抱歉，提供的截图没有在演示框架中中断，它需要全屏运行。调整浏览器大小以查看它在大多数尺寸下的中断，并在一个小子集中工作（正好是 sn-p 输出的大小）。

/*
  Fugly border to clearly illustrate the problem
*/
label {
  border: 1px solid;
}

div {
  border: 1px solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <label class="col-xs-4 col-sm-2 col-lg-1 control-label text-right" for="Field1">Long label text goes here:</label>
    <div class="col-xs-8 col-sm-4 col-lg-3">
        <input class="form-control" id="Field1" placeholder="Field1" type="text"/>
    </div>
    <label class="col-xs-4 col-sm-2 col-lg-1 control-label text-right" for="Field2">Short label:</label>
    <div class="col-xs-8 col-sm-4 col-lg-3">
        <input class="form-control" id="Field2" placeholder="Field2" type="text"/>
    </div>
    <label class="col-xs-4 col-sm-2 col-lg-1 control-label text-right" for="Field3">Short label:</label>
    <div class="col-xs-8 col-sm-10 col-lg-3">
        <input class="form-control" id="Field3" placeholder="Field3" type="text" runat="server" />
    </div>
</div>

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 grid-layout word-wrap

【解决方案1】：

代码中的一些常见错误，我的解决方法如下：

切勿在 label 或 input 类中使用网格系统。即 col-lg-* 或 col-sm-* 或 col-xs-* 都必须写在 div 中，它是 label 和 input 的父级强>。（有关更多信息，请查看我的代码）。
在 class="container" 之后添加了 class="row"，以使其在浏览器视图中正确对齐。
要正确对齐元素的高度，您需要添加引导程序 class="clearfix"。
如果您在移动端视图中有高度问题，请添加class="clearfix visible-xs"，或添加class="clearfix visible-sm" 如果您在小视图中有高度问题等等。
在 col-xs 的总数变为 12 之后，我首先添加了 clearfix visible-xs
在 col-sm 总数变为 12 后添加下一个 clearfix visible-sm。
最后添加了 clearfix visible-md，因为 col-md 没有写入，但在 medium devices 中仍然显示问题，所以我需要立即将其放在 col-sm 之后。

所以下面是我的工作代码：

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
        <title>TechGenium</title>

        <!-- Font-Awesome CDN -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"></link>

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">


    </head>
    <body>

        <div class="container">
            <div class="row">

                <div class="col-lg-1 col-sm-2 col-xs-4">
                    <label class="control-label" for="Field1">Long label text goes here:</label>
                </div>
                <div class="col-lg-3 col-sm-4 col-xs-8">
                    <input class="form-control" id="Field1" placeholder="Field1" type="text"/>
                </div>

                <div class="clearfix visible-xs"></div>

                <div class="col-lg-1 col-sm-2 col-xs-4">
                    <label class="control-label" for="Field3">Short label:</label>
                </div>
                <div class="col-lg-3 col-sm-4 col-xs-8">
                    <input class="form-control" id="Field2" placeholder="Field2" type="text"/>
                </div>

                <div class="clearfix visible-sm"></div>
                <div class="clearfix visible-md"></div>

                <div class="col-lg-1 col-sm-2 col-xs-4">
                    <label class="control-label" for="Field3">Short label:</label>
                </div>
                <div class="col-lg-3 col-sm-4 col-xs-8">
                    <input class="form-control" id="Field3" placeholder="Field3" type="text" runat="server"/>
                </div>

            </div>
        </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

    </body>
</html>

【讨论】：

完美的@Niraj，clearfix 是我一直在寻找的。我已经阅读了很多次文档，但仍然错过了Responsive Column Resets 部分。感谢您解释一些额外的问题。我注意到col-* 类不适用于输入，并发现它们需要包装在divs 中，但我没有意识到label 也应该包装在div 中。