twitter-bootstrap Bootstrap，将输入与标签对齐到没有标签的按钮，垂直形式/非水平
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31214255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap, align input with label to button without label, vertical form / not horizontal
提问by LPodolski
I want to align input with label, to button without label, using bootstrap v3 with default form (vertical, not horizontal layout of form).
我想将输入与标签对齐，到没有标签的按钮，使用 bootstrap v3 和默认表单（表单的垂直布局，而不是水平布局）。
Desired effect: http://screencast.com/t/b2uwBopW9rW
预期效果：http: //screencast.com/t/b2uwBopW9rW
I managed to solve this by creating label with non-breaking space inside label, but I wonder if there is more clean, better way to achieve this effect.
我设法通过在标签内创建带有不间断空间的标签来解决这个问题，但我想知道是否有更干净、更好的方法来实现这种效果。
Example on jsfiddle: https://jsfiddle.net/r6o5hysk/1/
jsfiddle 示例：https://jsfiddle.net/r6o5hysk/1/
<div class='container' style='width:200px; margin: 50px;'>
<div class="row">
<div class="col-xs-10">
<div class="form-group">
<label>
Name
<input type="text" class="form-control" />
</label>
</div>
</div>
<div class="col-xs-2">
<div class="form-group">
<label>
<div class="btn btn-danger">Remove</div>
</label>
</div>
</div>
</div>
</div>
Thank you for your time.
感谢您的时间。
采纳答案by Gaurav Aggarwal
Bootstrap is a great structure in which you can create any kind of html just you need to understand the structure. Always try to use only bootstrap classes but not the external things.
Bootstrap 是一个很棒的结构，您可以在其中创建任何类型的 html，只需要了解该结构即可。总是尝试只使用引导类而不是外部的东西。
Check this bootstrap only structure with the desired output
使用所需的输出检查此仅引导程序结构
<div class='container' style='width:200px; margin: 50px;'>
<div class="row">
<div class="col-lg-12">
<label>Name</label>
<div class="row">
<div class="col-xs-10">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-xs-2">
<div class="form-group">
<div class="btn btn-danger">Remove</div>
</div>
</div>
</div>
</div>
</div>
</div>
Example : https://jsfiddle.net/r6o5hysk/2/
回答by Dmytro Skliarov
Adding margins is not the best idea. What if the labelfont-sizechanges? You'll need to adjust the marginas well.
添加边距不是最好的主意。如果有labelfont-size变化怎么办？你也需要调整margin。
Make the buttonto act as a block
使button充当block
.btn.btn-as-block {
display: block;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
<div class="row">
<div class="col-xs-9">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="col-xs-3">
<div class="form-group">
<label> </label>
<div class="btn btn-danger btn-as-block">Remove</div>
</div>
</div>
</div>
</div>回答by scrnjakovic
I know OP asked (long time ago) for BS3, but for those who stumbled upon this thread and are looking for BS4 solution (given you use SCSS), you can use following code to create mt-label mt-lg-label ...etc classes and use them on controls without labels
我知道 OP（很久以前）问过 BS3，但是对于那些偶然发现这个线程并正在寻找 BS4 解决方案的人（假设您使用 SCSS），您可以使用以下代码创建mt-label mt-lg-label ...等类并在没有标签的控件上使用它们
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.mt#{$infix}-label {
margin-top: $label-margin-bottom + ($line-height-base * $font-size-base);
}
}
}
As long as your labels inherit it's font-size and line-height from the body (which they do in BS4 by default) and you increase font-size using variables (like you shoud), it will account for the font-size changes.
只要您的标签从正文继承它的字体大小和行高（默认情况下它们在 BS4 中这样做）并且您使用变量增加字体大小（就像您应该的那样），它将解释字体大小的变化。
回答by KAD
Check this out, no need for extra divs or .
看看这个，不需要额外的 div 或 .
I have kept the <label>field for the Name only since logically an input field is not a label.
我只保留了<label>Name 字段，因为逻辑上输入字段不是标签。
No need for div <div class="form-group">it just applies extra margin.
不需要 div<div class="form-group">它只是应用额外的边距。
I have added a class alignment to the button, and setup margin-topto align.
我在按钮上添加了一个类对齐，并设置margin-top为对齐。
.alignment
{
margin-top:25px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container' style='width:200px; margin: 50px;'>
<div class="row">
<div class="col-xs-10">
<label>
Name
</label>
<input type="text" class="form-control" />
</div>
<div class="col-xs-2">
<div class="btn btn-danger alignment">Remove</div>
</div>
</div>
</div>回答by DavidDomain
You actually just have to put the labeloutside of the form-group. To overcome the responsive behavior of form-groupadd display:inline-blockto the element. Added marge-leftto the buttonto create the gap between the inputand the button.
实际上，你只需要把label外面form-group。克服form-group添加display:inline-block到元素的响应行为。加入marge-left到button创造之间的差距input和button。
.forceInlineBlock {
display: inline-block;
}
.addLeftMargin25 {
margin-left: 25px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<label for="name">Name</label><br />
<div class="form-group forceInlineBlock">
<input type="text" class="form-control" id="name" />
</div>
<button class="btn btn-danger addLeftMargin25">Remove</button>
</form> 回答by alexventuraio
Maybe this is a little bit late because the OP was from 2015 but anyway, it maybe useful for somebody using the newest Bootstrap 4.3.1.
也许这有点晚了，因为 OP 是从 2015 年开始的，但无论如何，它可能对使用最新Bootstrap 4.3.1 的人有用。
Actually you do not need to include any extra CSS or do any kind of complex tweaks, just taking advantage of how row, form-row, colclasses behave side by side and how its paddingand marginscoexist each other is enough.
其实你不需要任何多余的CSS或做任何复杂调整的，只是走的如何利用row，form-row，col类的行为并列，以及如何它padding和margins共存对方就足够了。
This is the structure you need to follow make it work:
这是您需要遵循的结构才能使其工作：
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
<form>
<div class="form-row">
<div class="col-md-12">
<label for="name">User data:</label>
<div class="form-row">
<div class="col-5">
<input type="text" class="form-control" id="name" placeholder="Alex Ventura">
</div>
<div class="col-5">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="alexventuraio">
</div>
</div>
<div class="col-2">
<button type="submit" class="btn btn-primary">Contact</button>
</div>
</div>
</div>
</div>
</form>
</div>I hope it could give an idea to anyone else with the same problem. Here is my penjust for further reference.
我希望它可以给其他有同样问题的人一个想法。这是我的笔，仅供进一步参考。
