CSS Bootstrap：将输入与按钮对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10615872/
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 button
提问by pguardiario
Why don't buttons and inputs align well in Bootstrap?
为什么按钮和输入在 Bootstrap 中不能很好地对齐？
I tried something simple like:
我尝试了一些简单的事情，例如：
<input type="text"/><button class="btn">button</button>
The button is about 5pxlower than the input in chrome/firefox.
该按钮大约5px低于 chrome/firefox 中的输入。
回答by My Head Hurts
Twitter Bootstrap 4
推特引导程序 4
In Twitter Bootstrap 4, inputs and buttons can be aligned using the input-group-prependand input-group-appendclasses (see https://getbootstrap.com/docs/4.0/components/input-group/#button-addons)
在 Twitter Bootstrap 4 中，输入和按钮可以使用input-group-prepend和input-group-append类对齐（请参阅https://getbootstrap.com/docs/4.0/components/input-group/#button-addons）
Group button on the left side (prepend)
左侧的组按钮（前置）
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<input type="text" class="form-control">
</div>
Group button on the right side (append)
右侧的分组按钮（附加）
<div class="input-group mb-3">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<input type="text" class="form-control">
</div>
Twitter Bootstrap 3
推特引导程序 3
As shown in the answer by @abimelex, inputs and buttons can be aligned by using the .input-groupclasses (see http://getbootstrap.com/components/#input-groups-buttons)
如@abimelex 的回答所示，输入和按钮可以通过使用.input-group类来对齐（参见http://getbootstrap.com/components/#input-groups-buttons）
Group button on the left side
左侧的分组按钮
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div>
Group button on the right side
右侧的分组按钮
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
This solution has been added to keep my answer up to date, but please stick your up-vote on the answer provided by @abimelex.
添加此解决方案是为了使我的答案保持最新，但请对@abimelex 提供的答案投赞成票。
Twitter Bootstrap 2
推特引导程序 2
Bootstrap offers an .input-appendclass, which works as a wrapper element and corrects this for you:
Bootstrap 提供了一个.input-append类，它用作包装元素并为您纠正此问题：
<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
As pointed out by @OleksiyKhilkevich in his answer, there is a second way to align inputand buttonby using the .form-horizontalclass:
正如@OleksiyKhilkevich 在他的回答中指出的那样，还有第二种对齐input和button使用.form-horizontal类的方法：
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
The Differences
差异
The difference between these two classes is that .input-appendwill place the buttonup against the inputelement (so they look like they are attached), where .form-horizontalwill place a space between them.
这两个类之间的区别在于.input-append将button向上放置在input元素上（因此它们看起来像是附加的），在.form-horizontal它们之间放置一个空格。
-- Note --
- 笔记 -
To allow the inputand buttonelements to be next to each other without spacing, the font-sizehas been set to 0in the .input-appendclass (this removes the white spacing between the inline-blockelements). This may have an adverse effect on font-sizes in the inputelement if you want to override the defaults using emor %measurements.
为了允许input和button元素彼此相邻而没有间距，font-size已0在.input-append类中设置为（这会删除inline-block元素之间的白色间距）。input如果您想使用em或%测量覆盖默认值，这可能会对元素中的字体大小产生不利影响。
回答by Karl Adler
you may use the input-group button propertyto apply the button direct to the input-field.
您可以使用输入组按钮属性将按钮直接应用于输入字段。
Bootstrap 3 & 4
引导程序 3 和 4
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
Take a look at BS4 Input-Group docfor many more examples.
查看BS4 Input-Group 文档了解更多示例。
回答by Oleksiy Khilkevich
Just the heads up, there seems to be special CSS class for this called form-horizontal
请注意，似乎有一个特殊的 CSS 类称为 form-horizontal
input-append has another side effect, that it drops font-size to zero
input-append 有另一个副作用，它将字体大小降为零
回答by ZEESHAN ARSHAD
Use .form-inline= This will left-align labels and inline-block controls for a compact layout
Example: http://jsfiddle.net/hSuy4/292/
使用.form-inline= 这将左对齐标签和内联块控件以获得紧凑的布局
示例：http: //jsfiddle.net/hSuy4/292/
<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>
.form-horizontal= Right align labels and float them to the left to make them appear on the same line as controls which is better for 2 column form layout.
.form-horizontal= 右对齐标签并将它们向左浮动，使它们与控件显示在同一行，这更适合 2 列表单布局。
(e.g.
Label 1: [textbox]
Label 2: [textbox]
: [button]
)
Examples: http://twitter.github.io/bootstrap/base-css.html#forms
回答by Abhimanyu
I tried above all and end-up with few changes which I would like to share. Here's the code which works for me (find the attached screenshot):
我首先进行了尝试，但最终做出了一些我想分享的更改。这是对我有用的代码（找到附加的屏幕截图）：
<div class="input-group">
<input type="text" class="form-control" placeholder="Search text">
<span class="input-group-btn" style="width:0;">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
If you want to see it working, just use below code in you editor:
如果你想看到它的工作，只需在你的编辑器中使用下面的代码：
<html>
<head>
<link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
</head>
<body>
<div class="container body-content">
<div class="form-horizontal">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search text">
<span class="input-group-btn" style="width:0;">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</body>
</html>
Hope this helps.
希望这可以帮助。
回答by Bikash Bishwokarma
I was also struggling with same issue. The bootstrap classes I use are not working for me. I came up with an workaround, as below:
我也在为同样的问题苦苦挣扎。我使用的引导类对我不起作用。我想出了一个解决方法，如下所示：
<form action='...' method='POST' class='form-group'>
<div class="form-horizontal">
<input type="text" name="..."
class="form-control"
placeholder="Search People..."
style="width:280px;max-width:280px;display:inline-block"/>
<button type="submit"
class="btn btn-primary"
style="margin-left:-8px;margin-top:-2px;min-height:36px;">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</form>
Basically, I overrode the display property of class "form-control", and used other style properties for correcting the size and position.
基本上，我覆盖了“form-control”类的显示属性，并使用其他样式属性来更正大小和位置。
Following is the result:
结果如下：
回答by Alexander Kim
Bootstrap 4:
引导程序 4：
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-success" type="button">Button</button>
</div>
</div>
回答by Ashu Designer
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
回答by kupaff
I tried all the above codes and none of them fixed my issues. Here is what worked for me. I used input-group-addon.
我尝试了上述所有代码，但没有一个解决了我的问题。这对我有用。我使用了输入组插件。
<div class = "input-group">
<span class = "input-group-addon">Go</span>
<input type = "text" class = "form-control" placeholder="you are the man!">
</div>
回答by Trond
Not directly related, unless you have similar code but I just noticed a strange behaviour to form-inline, bootstrap 3.3.7
没有直接关系，除非你有类似的代码，但我只是注意到表单内联的一个奇怪的行为，引导程序 3.3.7
I did not use row and cells for this as it is a desktop project, if the opening tag was below table (in this case):
我没有为此使用行和单元格，因为它是一个桌面项目，如果开始标签在表格下方（在这种情况下）：
<table class="form-inline">
<form>
<tr>
Form elements would stack.
表单元素会堆叠。
Switch and it properly lined up.
开关并正确排列。
<form>
<table class="form-inline">
<tr>
Safari 10.0.2 and latest Chrome did not make any differences. Maybe my layout was wrong but it is not very forgiving.
Safari 10.0.2 和最新的 Chrome 没有任何区别。也许我的布局是错误的，但它不是很宽容。
