为什么在引导中按钮和输入不能很好地对齐?
我尝试了一些简单的方法:
<input type="text"/><button class="btn">button</button>
这个按钮比chrome/firefox的输入低大约5px。
当前回答
我也在为同样的问题而挣扎。我使用的引导类并不适合我。我想出了一个变通办法，如下所示:
<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”的显示属性，并使用其他样式属性来纠正大小和位置。
结果如下:
其他回答
<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>
我尝试了所有这些，最后我想分享一些变化。以下是对我有用的代码(请查看附件截图):
<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>
希望这能有所帮助。
引导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>
https://getbootstrap.com/docs/4.0/components/input-group/
不是直接相关的，除非你有类似的代码，但我刚刚注意到一个奇怪的行为形成内联，bootstrap 3.3.7
我没有使用行和单元格，因为这是一个桌面项目，如果开始标记在表下面(在这种情况下):
<table class="form-inline">
<form>
<tr>
表单元素会堆叠起来。
开关和它正确排列。
<form>
<table class="form-inline">
<tr>
Safari 10.0.2和最新的Chrome浏览器没有任何区别。也许我的布局是错误的，但它不是很宽容。
style="padding-top: 8px"
使用此选项在行中向上或向下移动div。对我来说很神奇。
