引导:将输入与按钮对齐

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

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

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

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

当前回答

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

2016-06-09 13:15:34

其他回答

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

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

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

表单元素会堆叠起来。

开关和它正确排列。

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

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

2017-02-01 13:24:09

style="padding-top: 8px"

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

2014-09-18 19:35:30

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

2014-03-23 14:45:50

我尝试了所有这些，最后我想分享一些变化。以下是对我有用的代码(请查看附件截图):

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

希望这能有所帮助。

2016-01-06 11:55:11

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

2013-07-15 20:04:00

引导:将输入与按钮对齐

推荐文章

最新文章

标签