为什么按钮和输入在 Bootstrap 中不能很好地对齐？
我尝试了一些简单的方法，例如：
<input type="text"/><button class="btn">button</button>
该按钮大约5px低于 chrome/firefox 中的输入。
问问题
433454 次
12 回答
592
推特引导程序 4
在 Twitter Bootstrap 4 中，可以使用input-group-prepend和input-group-append类对齐输入和按钮（请参阅https://getbootstrap.com/docs/4.0/components/input-group/#button-addons）
左侧的分组按钮（前置）
<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>
右侧的分组按钮（附加）
<div class="input-group mb-3">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
推特引导 3
如@abimelex 的回答所示，输入和按钮可以通过使用.input-group类来对齐（参见http://getbootstrap.com/components/#input-groups-buttons）
左侧的分组按钮
<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>
右侧的分组按钮
<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>
添加了此解决方案以使我的答案保持最新，但请对@abimelex 提供的答案投赞成票。
推特引导 2
Bootstrap 提供了一个.input-append类，该类用作包装元素并为您更正此问题：
<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
正如@OleksiyKhilkevich 在他的回答中指出的那样，还有第二种对齐方式input和button使用.form-horizontal类：
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
差异
这两个类之间的区别在于，.input-append将button向上放置在input元素上（因此它们看起来像是附加的），它们.form-horizontal之间将放置一个空格。
- 笔记 -
为了允许input和button元素彼此相邻而没有间距，font-size已0在类中设置了 （这将删除元素.input-append之间的白色间距）。如果您想使用或测量来覆盖默认值inline-block，这可能会对元素中的字体大小产生不利影响。inputem%
于 2012-05-16T09:52:14.517 回答
211
引导程序 5
<div class="input-group">
<input type="text" class="form-control">
<button class="btn btn-outline-secondary" type="button">Go</button>
</div>
引导程序 3 和 4
您可以使用input-group 按钮属性将按钮直接应用于输入字段。
<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 -->
查看BS4或BS5 Input-Group 文档以获取更多示例。
于 2014-03-23T14:45:50.360 回答
38
请注意，这似乎有一个特殊的 CSS 类form-horizontal
input-append 有另一个副作用，它会将 font-size 降为零
于 2012-12-06T23:10:47.837 回答
35
使用.form-inline = 这将左对齐标签和内联块控件以实现紧凑布局
示例：http: //jsfiddle.net/hSuy4/292/
<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>
.form-horizontal = 右对齐标签并将它们浮动到左侧，使它们与控件出现在同一行，这对于 2 列表单布局更好。
(e.g.
Label 1: [textbox]
Label 2: [textbox]
: [button]
)
于 2013-07-15T20:04:00.993 回答
17
我首先尝试了一些我想分享的更改。这是对我有用的代码（找到随附的屏幕截图）：
<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>
如果你想看到它工作，只需在你的编辑器中使用下面的代码：
<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>
希望这可以帮助。
于 2016-01-06T11:55:11.890 回答
6
我也在为同样的问题而苦苦挣扎。我使用的引导类对我不起作用。我想出了一个解决方法，如下所示：
<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>
基本上，我覆盖了“form-control”类的显示属性，并使用其他样式属性来校正大小和位置。
结果如下：
于 2016-08-11T01:00:03.330 回答
6
引导程序 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>
于 2019-06-11T07:52:29.723 回答
4
<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>
于 2016-02-10T11:58:48.910 回答
3
我尝试了上述所有代码，但没有一个能解决我的问题。这对我有用。我使用了输入组插件。
<div class = "input-group">
<span class = "input-group-addon">Go</span>
<input type = "text" class = "form-control" placeholder="you are the man!">
</div>
于 2016-06-09T13:15:34.960 回答
1
没有直接关系，除非您有类似的代码，但我只是注意到 form-inline, bootstrap 3.3.7 的奇怪行为
我没有为此使用行和单元格，因为它是一个桌面项目，如果开始标签在表格下方（在这种情况下）：
<table class="form-inline">
<form>
<tr>
表单元素会堆叠。
开关并正确排列。
<form>
<table class="form-inline">
<tr>
Safari 10.0.2 和最新的 Chrome 没有任何区别。也许我的布局是错误的，但它不是很宽容。
于 2017-02-01T13:24:09.743 回答
1
将输入浮点数设为左侧。然后按下按钮并使其向右浮动。当您采取多于一的距离时，您可以清除固定类。
<input style="width:65%;float:left"class="btn btn-primary" type="text" name="name">
<div style="width:8%;float:left"> </div>
<button class="btn btn-default" type="button">Go!</button>
<div class="clearfix" style="margin-bottom:10px"> </div>
于 2019-08-22T11:30:22.780 回答
-1
style="padding-top: 8px"
使用它在您的行中向上或向下移动您的 div。为我创造奇迹。
于 2014-09-18T19:35:30.230 回答