bootstrap:使用按钮对齐输入
pgu*_*rio 288 css twitter-bootstrap
为什么按钮和输入在引导程序中没有很好地对齐？我尝试过一些简单的事情:
<input type="text"/><button class="btn">button</button>
该按钮比chrome/firefox中的输入低约5px.
My *_*rts 531
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 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类中设置了(这消除了inline-block元素之间的白色间距).input如果要使用em或%测量覆盖默认值,这可能会对元素中的字体大小产生负面影响.
- 谢谢你的回答,但我觉得这里出了点问题.当然,我不是第一个希望引导组件与表单元素对齐的人. (5认同)
- @opsb如果他们占用相同数量的垂直空间,那么他们会.然而,twitter bootstrap中的输入字段有一个`margin-bottom:9px`但按钮没有,因此它们不会占用相同的垂直空间.由于两个元素都具有"中间"垂直对齐,因此按钮由于差异而偏移.使用`.input-append`包装器会删除此margin-bottom值. (2认同)
Kar*_*ler 185
您可以使用input-group按钮属性将按钮直接应用于输入字段.
Bootstrap 3和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><!-- /input-group -->
请查看BS4输入组文档以获取更多示例.
- 其他的并没有对我有用,但是,这个只是我想要的方式.谢谢. (2认同)
小智 29
使用.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
- 我可以确认`form-inline`适用于Bootstrap 3.谢谢. (2认同)
Abh*_*nyu 16
我首先尝试过并最终得到一些我想分享的变化.这是适用于我的代码(查找附带的屏幕截图):
<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类不适合我.我想出了一个解决方法,如下所示:
<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"类的display属性,并使用其他样式属性来校正大小和位置.
以下是结果:
引导程序 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/