使用 Bootstrap 3 表单。在正常的 Bootstrap 表单中，字段标签位于输入字段的顶部(没有 form-inline，没有 form-horizontal)，我希望能够显示灵活数量的控件在同一行。例如:
- 全宽屏幕上有 4 个控件
- 中等尺寸屏幕上有 2 个控件
- 小屏幕上的 1 个控件
为了实现这一点，我们可以使用 Bootstrap row 对所有四个控件进行分组，并为每个控件分配适当的 col-xx-x 类。请参阅下面的代码。
此布局的问题在于，当控件以堆叠方式显示(多于一行)并且用于显示控件中错误的 help-block 时，将显示控件布局的正下方帮助文本向右推一位。其原因是这些控件共享同一行，并且帮助消息添加的额外高度填充了下一行中的一个空格。请参阅提供的示例。
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<form>
<div class="row">
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
<span id="errorMessage" class="help-block" style="display: none">This is the error message</span>
</div>
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="other">Other</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Other">
</div>
</div>
</form>
<button class="btn btn-default" onclick="function showError() {document.getElementById('errorMessage').style.display = 'inline'};showError();">
Show error message in email control
</button>
</div>
</body>
</html>我尝试过 form-inline 表单，但帮助文本显示在控件的右侧而不是下面。
最佳答案
我希望这就是您正在寻找的...
.no-padding {
padding-left: 0 !important;
padding-right: 0 !important;
}
.no-right-margin {
margin-right: 0 !important;
}<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<form>
<div class="row">
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
<span id="errorMessage" class="help-text" style="display: none">This is the error message</span>
</div>
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<div class="col-xs-6 col-md-4 col-lg-3 no-padding">
<div class="row no-right-margin">
<div class="form-group col-xs-12 col-md-12 col-lg-12">
<label for="other">Other</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Other">
</div>
</div>
</div>
</form>
<button class="btn btn-default" onclick="function showError() {document.getElementById('errorMessage').style.display = 'inline'};showError();">
Show error message in email control
</button>
</div>
</body>
</html>关于html - 显示帮助文本时 Bootstrap 表单布局中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52643535/