SpinEdit垂直对齐的按钮

Question

我正在使用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？

Answer 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;
}