我正在尝试使用Bootstrap创建响应式表单,但“cell”(Bootstrap网格元素)高度会破坏行对齐。由于这应该是响应式的,我认为我不能定义<div class="row">
强制换行(因为我不知道行是什么)。
在大多数情况下,输入高度大于标签并且没有问题,但如果标签包裹在第二行上,则其高度变得大于输入,并且下一行网格元素从那里开始。 / p>
有解决方法吗?我搜索过并且只发现了固定高度的行(有时也称为固定高度列),但这些行似乎是黑客攻击而不是浏览器普遍支持。当然有一种我没有找到的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>
答案 0 :(得分:1)
代码和我的解决方案中的一些常见错误如下:
以下是我的工作代码:
<!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>