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

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

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

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


当前回答

不是直接相关的,除非你有类似的代码,但我刚刚注意到一个奇怪的行为形成内联,bootstrap 3.3.7

我没有使用行和单元格,因为这是一个桌面项目,如果开始标记在表下面(在这种情况下):

<table class="form-inline"> 
<form> 
<tr>

表单元素会堆叠起来。

开关和它正确排列。

<form>
<table class="form-inline">
<tr>

Safari 10.0.2和最新的Chrome浏览器没有任何区别。也许我的布局是错误的,但它不是很宽容。

其他回答

引导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/

我也在为同样的问题而挣扎。我使用的引导类并不适合我。我想出了一个变通办法,如下所示:

<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>

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

引导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 button属性将按钮直接应用到输入字段。

<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输入组文档以获得更多示例。