SpinEdit垂直对齐的按钮

时间:2014-08-06 09:30:43

标签: twitter-bootstrap twitter-bootstrap-2

我正在使用Twitter Bootstrap 2.3.2。我正在尝试在输入控件旁边显示spinedit按钮。目前我看起来像这样:

enter image description here

使用以下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控件的默认外观:

enter image description here

是否可以在输入旁边对齐它们,而不使用任何自定义CSS?

1 个答案:

答案 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;
}