我正在使用Twitter Bootstrap 2.3.2。我正在尝试在输入控件旁边显示spinedit按钮。目前我看起来像这样:
使用以下HTML:
<div class="input-append">
<input type="text" class="input-mini" type="text">
<span class="btn-group">
<button class="btn">
<i class="icon icon-chevron-up"></i>
</button>
<button class="btn">
<i class="icon icon-chevron-down"></i>
</button>
</span>
</div>
您可以在此处观看现场演示:
http://geersch.github.io/ui.cg/#/api/cg.ui.directive:numberinput
但是我试图让它看起来更像是spinedit控件的默认外观:
是否可以在输入旁边对齐它们,而不使用任何自定义CSS?
答案 0 :(得分:1)
将此类添加到垂直对齐btn-group
: btn-group-vertical
文档:http://getbootstrap.com/2.3.2/components.html#buttonGroups
HTML :
<div class="input-append">
<input type="text" class="input-mini" type="text">
<span class="btn-group btn-group-vertical">
<button class="btn">
<i class="icon icon-chevron-up">s</i>
</button>
<button class="btn">
<i class="icon icon-chevron-down">d</i>
</button>
</span>
</div>
而且,即使你不想要css:只是为了修复视图(因为按钮很大[大于输入]):
CSS:
.btn-group-vertical > .btn{
height: 1em;
padding: 0px 6px 13px;
}