Question

我在网格上构建过滤器。我定义了一个自定义过滤器类。在这个过滤器类中，我还尝试使用与我的输入框相同样式的复选框。由于某种原因，我不能得到与其余元素相同的大小。在我正在做的事情之下。有人能指出我做错了吗？

<div class="FilterBar">
    <div>
        <div class="input-daterange input-group" id="datepicker">
            <span class="input-group-addon ">Set date</span>
            <input type="text" class="form-control" />
            <span class="input-group-addon">to</span>
            <input type="text" class="form-control" />
        </div>
    </div>
    <div>
        <div class="input-group">
            <span class="input-group-addon ">Group Flocks</span>
            <span class="input-group-addon">
                <input type="checkbox"/>
            </span>
        </div>
    </div>
    <div class="pull-right">
        <button type="button" class="btn btn-warning pull-right">Filter</button>
    </div>

 .FilterBar {
    position: relative;
    display: table;
}
.FilterBar > div {
    display: table-cell;
    padding-right: 8px;
    vertical-align: top;
}
.Toolbar .btn-group, .Toolbar .btn-group-vertical {
    vertical-align: inherit;
}

Answer 1

你可以将类“form-control”添加到Group Flocks并添加一个类.some with line-height：20px; HTML

<div class="input-group">
    <span class="input-group-addon form-control some">Group Flocks</span>
    <span class="input-group-addon"> <input type="checkbox"/> </span>
</div>

和CSS：

.some {
    line-height: 20px;
}

http://jsfiddle.net/52VtD/6764/这不是最佳解决方案

你可以尝试将所有行放在div中，使用class =“row”，并为所有标签提供一些大小，例如.col-xs-4

Answer 2

.form-control具有行高：1.42857;

.input-group-addon的行高：1;

请参阅http://jsfiddle.net/52VtD/6766/我添加了

.input-group-addon {
    line-height: 1.42857;
}

引导过滤器栏中的元素大小不正确

2 个答案: