Bootstrap：将输入与按钮对齐

Posted 2023-02-16

【中文标题】Bootstrap：将输入与按钮对齐

【英文标题】：Bootstrap: align input with button

【发布时间】：2012-05-23 20:35:55

【问题描述】：

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

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

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

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

【参考方案1】：

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

推特引导 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 引导程序 2

Bootstrap 提供了一个 .input-append 类，它作为一个包装元素工作并为您纠正这个问题：

<div class="input-append">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

正如@OleksiyKhilkevich 在他的回答中指出的那样，还有第二种方法可以使用.form-horizontal 类来对齐input 和button：

<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 已在 .input-append 类中设置为 0（这将删除inline-block 元素）。如果您想使用em 或% 测量值覆盖默认值，这可能会对input 元素中的字体大小产生不利影响。

【讨论】：

感谢您的回答，但我觉得这里出了点问题。当然，我不是第一个希望引导组件与表单元素对齐的人。

@pguardiario - 你是完全正确的。看起来确实错了，拍了拍我的大脑后，我想起了.input-append 课程。

您需要一个包装类来执行此操作似乎很奇怪。他们不应该默认排队吗？

@opsb 如果他们占用了相同数量的垂直空间，那么他们会的。然而，twitter bootstrap 中的输入字段有一个margin-bottom: 9px，但按钮没有，因此它们不会占用相同的垂直空间。由于两个元素都具有middle 垂直对齐方式，因此按钮会因差异而发生偏移。使用 .input-append 包装器会删除这个 margin-bottom 值。

对，我猜如果它们默认具有相同的垂直高度，它会破坏其他表单布局。

【参考方案2】：

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

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

【讨论】：

+1 好地方 - 我不得不研究他们为什么使用 font-size: 0 并学到了一些新东西 :) 谢谢！

【参考方案3】：

使用 .form-inline = 这将使标签和内联块控件左对齐以实现紧凑的布局 示例：http://jsfiddle.net/hSuy4/292/

<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>

.form-horizo​​ntal = 右对齐标签并将它们浮动到左侧，使它们与控件显示在同一行，这对于 2 列表单布局更好。

(e.g. 
Label 1: [textbox]
Label 2: [textbox]
     : [button]
)

示例：http://twitter.github.io/bootstrap/base-css.html#forms

【讨论】：

我可以确认 form-inline 适用于 Bootstrap 3。谢谢。

太棒了！正是我需要的一个麻烦的形式！

似乎 .form-inline 仅在至少 768px 宽的视口中有效：w3schools.com/bootstrap/bootstrap_forms.asp

【参考方案4】：

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

<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 Input-Group 文档了解更多示例。

【讨论】：

其他的对我不起作用，但是这个对我有用，就像我想要的那样。谢谢。

对我来说，如果创建一个额外的 span 标签来分配类，它不起作用，但如果我将该类添加到 div 标签，它就起作用了：<div class="form-group input-group-btn">

这个答案对于BS4来说已经过时了，看看我的答案。

【参考方案5】：

style="padding-top: 8px"

使用它在你的行中向上或向下移动你的 div。为我创造奇迹。

【参考方案6】：

我最重要的是尝试了一些我想分享的更改。这是对我有用的代码（找到随附的屏幕截图）：

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

希望这会有所帮助。

【讨论】：

这适用于哪个 Bootstrap 版本？不使用style="width:0;"会导致什么问题？

如果你不使用 width:0 那么这将占据整个页面的宽度。

bootstrap 方式将使用 col-element 进行包装，例如 <div class="col-md-4"> 不需要 width: 0

我设置是因为我不希望输入控件占据屏幕的整个宽度

【参考方案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>

【参考方案8】：

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

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

【参考方案9】：

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

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

结果如下：

【参考方案10】：

没有直接关系，除非您有类似的代码，但我只是注意到 form-inline, bootstrap 3.3.7 的一个奇怪行为

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

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

表单元素会堆叠。

切换并正确排列。

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

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

【参考方案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/

【参考方案12】：

将输入浮点数作为左侧。然后按下按钮并使其向右浮动。 当你需要超过一个距离时，你可以清除修复类。

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