为什么在引导中按钮和输入不能很好地对齐?

我尝试了一些简单的方法:

<input type="text"/><button class="btn">button</button>

这个按钮比chrome/firefox的输入低大约5px。


当前回答

提醒一下,似乎有一个特殊的CSS类叫做form-horizontal

Input-append还有另一个副作用,它将font-size降为0

其他回答

style="padding-top: 8px"

使用此选项在行中向上或向下移动div。对我来说很神奇。

我尝试了上面所有的代码,没有一个能解决我的问题。以下是对我有效的方法。我使用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>

使用.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