html - 水平引导面板

Question

我一直在尝试改编 Bootstrap panel实现水平版本，但我无法让面板标题与面板主体中的内容垂直对齐 — 我假设这与清除 div 有关。

可以肯定地说，前端开发并不是我的强项。我确信这很容易完成，但它目前正在打败我!

这是我的标记:

<div class="panel panel-default panel-horizontal">
    <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, deserunt, aliquam, inventore commodi at placeat blanditiis quaerat quo fuga molestias ex quos debitis quidem dolor fugit aspernatur iste iusto quibusdam.</p>
    </div>
    <div class="panel-heading">
        <p>Example</p>
    </div>
</div>

以及随附的 CSS:

.panel-horizontal .panel-heading {
    border-bottom: 0;
    border-right: 1px solid transparent;
    border-top-right-radius: 0;
    margin-bottom: 0;
    width: 150px;
}

.panel-horizontal .panel-body {
    float: right;
    margin: 0 0 15px 150px;
    padding-bottom: 0;
}

我错过了什么？

Answer 1

编辑

我用 display: table 制作了一个功能齐全的水平面板。非常可靠:http://jsfiddle.net/seydoggy/9jv5e8d1/

原始消息

我知道这是一个旧的，但我正在寻找一个类似的解决方案并找到了你的 fiddle 。我刚刚在列周围包裹了一些面板并想出了这个:http://jsfiddle.net/qy96nh5L/

#wrap {
    padding: 2em;
}
.panel-horizontal {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.panel-horizontal > .panel-body {
    background-color: white;
    border-radius: 0 4px 4px 0;
    border-left: 1px solid #ddd;
}

<div id="wrap">
<div class="row panel panel-horizontal">
    <div class="col-xs-3">
        <div class="panel-heading">Example</div>
    </div>
    <div class="col-xs-9 panel-body white">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, deserunt, aliquam, inventore commodi at placeat blanditiis quaerat quo fuga molestias ex quos debitis quidem dolor fugit aspernatur iste iusto quibusdam.
    </div>
</div>