将元素放在一行并保持垂直居中,无论大小

Question

好的,我正在设计一个带有多个元素的Bootstrap手风琴标题面板:

1. 一个大按钮
2. 一些(短)文本/标题,可以是多行长
3. 左侧的一个小按钮组

从理论上讲,它的工作非常好,至少如果标题对于容器来说不是太长.如果它开始溢出到第二或第三行,整个概念就会崩溃.见我的小提琴这里.

我想要的是所有元素总是1.彼此相邻,2.垂直居中.

所以让我试着用更大的标题来描绘它应该如何看待:

-----------------------------------------------------
|                                                   |
| -------    Text that spillls over    ----------   |
| | BTN |    into the next line and    |  |  |  |   |
| -------    beyond!                   ----------   |
|                                                   |
-----------------------------------------------------

所以基本上,三个元素中的每一个都有明确定义的空间,并且在其内部垂直居中.

我该如何实现这一目标？

Answer 1

使用bootstrap网格系统可以非常简单地完成此操作,请在此处阅读一些信息:http://getbootstrap.com/css/

它应该是这样的:

<div class="row">
    <div class="col-md-2">left content</div>
    <div class="col-md-8">middle content</div>
    <div class="col-md-2">right content</div>
</div>

您应该阅读bootstrap文档,有更多示例和更多"如何",因此您可以找到您确切需要的内容

只是一些基础知识:

• bootstrap网格有12个"空格"列.在上面的例子中,我创建了3列布局,中间列比另一个大(你可以看到2-8-2 - 你可以玩3-6-3或类似 - 总和必须总是12)
• "md" col-md-...表示此列仅在Medium devices Desktops(≥992px)上可见,您可以使用"xs",或其他用于较小的设备 - 这取决于您需要什么