Bootstrap：将输入与按钮对齐

问题描述 投票：0回答：12

为什么按钮和输入在 Bootstrap 中不能很好地对齐？

我尝试了一些简单的方法，例如：

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

该按钮比 chrome/firefox 中的输入低约 

5px
。

enter image description here

css twitter-bootstrap
12个回答
607
投票

Twitter Bootstrap 5

在 Twitter Bootstrap 5 中，可以使用 

input-group
类对齐输入和按钮（请参阅 https://getbootstrap.com/docs/5.0/forms/input-group/#button-addons）。

左侧的分组按钮

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>

右侧的分组按钮

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>

Twitter Bootstrap 4

在 Twitter Bootstrap 4 中，可以使用 

input-group-prepend
和 
input-group-append
类来对齐输入和按钮（请参阅 https://getbootstrap.com/docs/4.0/components/input-group/#button-addons）

左侧的分组按钮（前置）

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

右侧的分组按钮（追加）

<div class="input-group mb-3">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

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>

添加此解决方案是为了使我的答案保持最新，但请对 @abimelex 提供的答案投赞成票。

Twitter 引导程序 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
（这将删除 
inline-block
之间的白色间距）元素）。如果您想使用 
input
或 
em
测量覆盖默认值，这可能会对 
%
元素中的字体大小产生不利影响。

221
投票

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

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

example for bs3 input group button

38
投票

请注意，似乎有一个特殊的 CSS 类，称为 

form-horizontal

input-append 还有另一个副作用，它将字体大小降至零

35
投票

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

17
投票

我首先尝试了，但最终做了一些我想分享的改变。这是适合我的代码（找到所附的屏幕截图）：

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

enter image description here

如果您想看到它工作，只需在编辑器中使用以下代码：

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

希望这有帮助。

6
投票

我也在同样的问题上苦苦挣扎。我使用的引导类不适合我。我想出了一个解决方法，如下所示：

<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”类的显示属性，并使用其他样式属性来纠正大小和位置。

结果如下：

enter image description here

6
投票

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

4
投票
<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>
3
投票

我尝试了上述所有代码，但都没有解决我的问题。这对我有用。我使用了输入组插件。 

<div class = "input-group">
  <span class = "input-group-addon">Go</span>
  <input type = "text" class = "form-control" placeholder="you are the man!">
</div>
1
投票

不直接相关，除非你有类似的代码，但我刚刚注意到 form-inline、bootstrap 3.3.7 有一个奇怪的行为

我没有为此使用行和单元格，因为它是一个桌面项目，如果开始标签位于表格下方（在本例中）：

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

表单元素会堆叠。

开关并正确排列。

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

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

1
投票

取左侧的输入浮点数。然后拿起按钮并将其向右浮动。 当您超过一门课程时，您可以清除课程。 

<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>
-1
投票
style="padding-top: 8px"

使用它可以在行中向上或向下移动 div。 对我来说有奇迹。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.