html - Bootstrap 3 - 彼此相邻的面板导致奇怪的顶部边距

Question

我有 3 个面板，它们的宽度相同，但有时彼此相邻的高度不同。当高度相同时，面板会正确对齐并且没有奇怪的顶部边距。

但是，当高度不同时，某些面板会被拖下并开始与面板主体对齐？ 面板主体的高度也不总是相同

我的 HTML 结构如下所示:

<div class="wrapper" data-reactid=".0.1">
    <div class="col-sm-4 list" data-reactid=".0.1.0">
        <div class="panel panel-default" data-reactid=".0.1.0.0">
            <div class="panel-heading clearfix" data-reactid=".0.1.0.0.0">
                <h4 class="panel-title pull-left" data-reactid=".0.1.0.0.0.0">Melodic House</h4>
                <button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.0.0.0.1"><span class="glyphicon glyphicon-remove" aria-hidden="true" data-reactid=".0.1.0.0.0.1.0"></span></button><button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.0.0.0.2"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true" data-reactid=".0.1.0.0.0.2.0"></span></button>
            </div>
            <ul class="list-group" data-reactid=".0.1.0.0.2">
                ...
            </ul>
        </div>
    </div>
    <div class="col-sm-4 list" data-reactid=".0.1.1">
        <div class="panel panel-default" data-reactid=".0.1.1.0">
            <div class="panel-heading clearfix" data-reactid=".0.1.1.0.0">
                <h4 class="panel-title pull-left" data-reactid=".0.1.1.0.0.0">Deep House</h4>
                <button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.1.0.0.1"><span class="glyphicon glyphicon-remove" aria-hidden="true" data-reactid=".0.1.1.0.0.1.0"></span></button><button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.1.0.0.2"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true" data-reactid=".0.1.1.0.0.2.0"></span></button>
            </div>
            <div class="panel-body" data-reactid=".0.1.1.0.1">
                <form class="form-horizontal" data-reactid=".0.1.1.0.1.0">
                    <div class="form-group" data-reactid=".0.1.1.0.1.0.0">
                        <label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.0.0">Min Duration (minutes)</label>
                        <div class="col-sm-6" data-reactid=".0.1.1.0.1.0.0.1"><input type="number" class="form-control" id="minDuration" value="0" data-reactid=".0.1.1.0.1.0.0.1.0"></div>
                    </div>
                    <div class="form-group" data-reactid=".0.1.1.0.1.0.1">
                        <label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.1.0">Max Duration (minutes)</label>
                        <div class="col-sm-6" data-reactid=".0.1.1.0.1.0.1.1"><input type="number" class="form-control" id="maxDuration" value="120" data-reactid=".0.1.1.0.1.0.1.1.0"></div>
                    </div>
                    <div class="form-group" data-reactid=".0.1.1.0.1.0.2">
                        <label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.2.0">Days old</label>
                        <div class="col-sm-6" data-reactid=".0.1.1.0.1.0.2.1"><input type="number" class="form-control" id="daysOld" value="60" data-reactid=".0.1.1.0.1.0.2.1.0"></div>
                    </div>
                    <div class="form-group" data-reactid=".0.1.1.0.1.0.3">
                        <label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.3.0">Query</label>
                        <div class="col-sm-6" data-reactid=".0.1.1.0.1.0.3.1"><input type="text" class="form-control" id="query" value="" data-reactid=".0.1.1.0.1.0.3.1.0"></div>
                    </div>
                    <div class="form-group" data-reactid=".0.1.1.0.1.0.4">
                        <label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.4.0">Sorting</label>
                        <div class="col-sm-6" data-reactid=".0.1.1.0.1.0.4.1">
                            <select class="form-control" id="sorting" data-reactid=".0.1.1.0.1.0.4.1.0">
                                <option value="hot" data-reactid=".0.1.1.0.1.0.4.1.0.0">Hot</option>
                                <option value="likes" data-reactid=".0.1.1.0.1.0.4.1.0.1">Likes</option>
                                <option value="plays" data-reactid=".0.1.1.0.1.0.4.1.0.2">Plays</option>
                                <option value="date" data-reactid=".0.1.1.0.1.0.4.1.0.3">Date</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" data-reactid=".0.1.1.0.1.0.5">
                        <label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.5.0">Player Height</label>
                        <div class="col-sm-6" data-reactid=".0.1.1.0.1.0.5.1"><input type="number" class="form-control" id="height" value="166" data-reactid=".0.1.1.0.1.0.5.1.0"></div>
                    </div>
                    <div class="form-group" data-reactid=".0.1.1.0.1.0.6">
                        <label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.6.0">Track limit</label>
                        <div class="col-sm-6" data-reactid=".0.1.1.0.1.0.6.1"><input type="number" class="form-control" id="limit" value="10" data-reactid=".0.1.1.0.1.0.6.1.0"></div>
                    </div>
                    <button class="btn btn-default pull-right" type="button" data-reactid=".0.1.1.0.1.0.7">Update</button>
                </form>
            </div>
            <ul class="list-group" data-reactid=".0.1.1.0.2">
                ...
            </ul>
        </div>
    </div>
    <div class="col-sm-4 list" data-reactid=".0.1.2">
        <div class="panel panel-default" data-reactid=".0.1.2.0">
            <div class="panel-heading clearfix" data-reactid=".0.1.2.0.0">
                <h4 class="panel-title pull-left" data-reactid=".0.1.2.0.0.0">Tropical House</h4>
                <button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.2.0.0.1"><span class="glyphicon glyphicon-remove" aria-hidden="true" data-reactid=".0.1.2.0.0.1.0"></span></button><button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.2.0.0.2"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true" data-reactid=".0.1.2.0.0.2.0"></span></button>
            </div>
            <ul class="list-group" data-reactid=".0.1.2.0.2">
                ...
            </ul>
        </div>
    </div>
</div>

(对 React 困惑感到抱歉)

如何让它们全部排列在顶部而不是底部？

Answer 1

我无法从您的代码片段中重现这一点，但在使用 display:table-cell 时会观察到这种行为，在这种情况下，vertical-align: top 会将它们对齐在顶部。