引导:将输入与按钮对齐

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

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

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

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

当前回答

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

2016-02-10 11:58:48

其他回答

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

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

结果如下:

2016-08-11 01:00:03

左取一个输入浮点数。然后取下按钮，让它向右浮动。当你需要一个以上的课程时，你可以clearfix。

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

2019-08-22 11:30:22

提醒一下，似乎有一个特殊的CSS类叫做form-horizontal

Input-append还有另一个副作用，它将font-size降为0

2012-12-06 23:10:47

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

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

<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

引导:将输入与按钮对齐

推荐文章

最新文章

标签