Bootstrap 网格单元格高度打破环绕

Question

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

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

有办法解决这个问题吗？我搜索过，只找到了固定高度的行（有时也称为固定高度的列），但这些似乎是 hack，并没有得到浏览器的普遍支持。确实有一种 Bootstrap 方法可以做到这一点，但我还没有找到。

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

/*
  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>

Answer 1

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

切勿在 label 或 input class 中使用网格系统。即 col-lg-* 或 col-sm-* 或 col-xs-* 都必须写在 div 里面，它是 label[= 的父级44=] 和输入。（有关更多信息，请查看我的代码）。

在 class="container" 之后添加了 class="row" 只是为了使其在浏览器方面正确对齐查看。

要使元素的高度正确对齐，您需要添加 bootstrap class="clearfix".

如果您在移动视图中有身高问题，请添加class="clearfix visible-xs"，或添加class="clearfix visible-sm"如果你在小视角等有身高问题

我先加了clearfix visible-xs后总col-xs变成了12

接下来clearfix visible-sm在总col-sm变成12[=44=之后].

终于添加了clearfix visible-md，因为col-md没有写但是在[=15=中仍然显示问题]中型设备 所以我需要立即将它放在 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>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"></link>  <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>  <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>

Bootstrap 网格单元格高度打破环绕

Bootstrap grid cell height breaks wrapping

twitter-bootstrap

twitter-bootstrap-3

grid-layout

word-wrap