Question

为什么按钮和输入在引导程序中没有很好地对齐？我尝试过一些简单的事情：

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

该按钮比chrome / firefox中的输入低约5px。 enter image description here

Answer 1

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

已添加此解决方案以使我的答案保持最新，但请在the answer provided by @abimelex上坚持投票。

Twitter Bootstrap 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 class（这会删除inline-block元素之间的空白）。如果您想使用input或em测量覆盖默认值，这可能会对%元素中的字体大小产生负面影响。

Answer 2

您可以使用input-group button property将按钮直接应用于输入字段。

Bootstrap 3＆amp; 4

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

请查看BS4 Input-Group doc以获取更多示例。

Answer 3

只是抬头，似乎有一个特殊的CSS类，称为form-horizontal

input-append还有另一个副作用，即它将font-size降为零

Answer 4

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

Answer 5

我首先尝试过并最终得到一些我想分享的变化。这是适用于我的代码（查找附带的屏幕截图）：

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

希望这有帮助。

Answer 6

我也在努力解决同样的问题。我使用的bootstrap类不适合我。我想出了一个解决方法，如下所示：

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

基本上，我覆盖了类＆＃34; form-control＆＃34;的显示属性，并使用其他样式属性来校正大小和位置。

结果如下：

Answer 7

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

Answer 8

我尝试了以上所有代码，但没有一个修复我的问题。这对我有用。我使用了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>

Answer 9

没有直接关联，除非你有类似的代码，但我只是注意到一个奇怪的行为形式 - 内联，bootstrap 3.3.7

我没有使用行和单元格，因为它是一个桌面项目，如果开头标记位于表格下方（在这种情况下）：

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

表格元素会叠加。

切换并正确排列。

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

Safari 10.0.2和最新的Chrome没有任何区别。也许我的布局错了，但不是很宽容。

Answer 10

以输入浮点数为左。然后按一下按钮并将其向右浮动。距离不止一个时，您可以清除类。

<input style="width:65%;float:left"class="btn btn-primary" type="text" name="name"> 
<div style="width:8%;float:left">&nbsp;</div>
<button class="btn btn-default" type="button">Go!</button>
<div class="clearfix" style="margin-bottom:10px"> </div>

Answer 11

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

Answer 12

style="padding-top: 8px"

使用此功能可以在您的行中向上或向下移动div。为我创造了奇迹。

bootstrap：使用按钮对齐输入

12 个答案:

Twitter Bootstrap 3

左侧的“组”按钮

右侧的组按钮

Twitter Bootstrap 2

差异