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/

原始消息

我知道这是一个旧的，但我正在寻找一个类似的解决方案，并找到你的小提琴。我刚刚在专栏周围包裹了一些面板并提出了这个问题：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>

Answer 2

Nev，为了使面板标题在面板体旁边垂直对齐，你必须给两个div一个float属性。下面是CSS调整。我也修改了两者的宽度，让你了解定位的工作原理。浮动元素的百分比很好。请注意，panel-heading设置为19％宽度，panel-body设置为80％width。通常情况下，面板标题为20％，但是1px透明边框会将面板标题的宽度推到20％以上，并强制面板体到下一行。所以为了解决这个问题，我只是下降了1％。如果百分比不起作用，请注意，如果您有两个彼此相邻的元素，则它们的组合宽度不能超过父元素的宽度。此外，您需要在浮动的两个元素上使用宽度，以使它们适合相同的“线”。

.panel-horizontal .panel-heading {
       float: left;
       width: 19%;
       padding: 0;
       border-bottom: 0;
       border-right: 1px solid transparent;
       border-top-right-radius: 0;
       margin-bottom: 0;
}

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

水平自举面板

2 个答案:

修改

原始消息