为什么在引导中按钮和输入不能很好地对齐?
我尝试了一些简单的方法:
<input type="text"/><button class="btn">button</button>
这个按钮比chrome/firefox的输入低大约5px。
当前回答
引导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/
其他回答
我尝试了上面所有的代码，没有一个能解决我的问题。以下是对我有效的方法。我使用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>
左取一个输入浮点数。然后取下按钮，让它向右浮动。 当你需要一个以上的课程时，你可以clearfix。
<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>
使用.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]
)
示例:http://twitter.github.io/bootstrap/base-css.html形式
<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>
提醒一下，似乎有一个特殊的CSS类叫做form-horizontal
Input-append还有另一个副作用，它将font-size降为0
