Question

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

一个大按钮
一些（短）文本/标题，可以是多行
左侧的小按钮组

从理论上说，工作得很好，至少如果标题对于容器来说不是太长。如果它开始溢出到第二或第三行，整个概念就会崩溃。看我的小提琴here。

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

因此，让我试着用更大的标题来描绘它应该如何看待：

accesslog = '/root/logs/accesslog.log'
loglevel = 'debug'
access_log_format = '%(h)s %(l)s %(u)s %(t)s "%(r)s" %(s)s %(b)s "%(f)s" "%(a)s"'

基本上，这三个元素中的每一个都有明确定义的空间，并且在其中垂直居中。

我如何实现这一目标？

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文档，还有更多例子和更多＆＃34;如何＆＃34;，以便你可以找到你真正需要的东西

只是一些基础知识：

bootstrap网格有12＆＃34;空格＆＃34;对于列。在上面的例子中，我创建了3列布局，中间列比另一个大（你可以看到2-8-2 - 你可以玩3-6-3或类似 - 总和必须总是12）
＆＃34; md＆＃34;在col-md-...中表示此列仅在中型设备桌面（≥992px）上可见，您可以使用＆＃34; xs＆＃34;或其他用于较小的设备 - 这取决于您的需要

Answer 2

这可能是您正在寻找的东西，垂直居中。

这是 fiddle

代码：

<强>的CSS ：

.cell {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

<强> HTML ：

<div id="panel-1" class="panel panel-default">
    <div class="panel-heading clearfix">
        <div class="row">
            <div class="col-xs-2 cell">
                <button type="button" class="btn btn-default some-button">button!</button>
            </div>
            <div class="col-xs-8 cell">
                <h4 class="panel-title pull-left heading">
                  <a>Short</a>
                </h4>
            </div>
            <div class="col-xs-2 cell" >
                <div class="btn-group">
                    <button type="button" class="btn btn-default">a</button>
                    <button type="button" class="btn btn-default">b</button>
                    <button type="button" class="btn btn-default">c</button>
                </div>
            </div>
        </div>
    </div>
    <div id="panel-2" class="panel panel-default">
        <div class="panel-heading clearfix">
            <div class="row">
                <div class="col-xs-2 cell">
                    <button type="button" class="btn btn-default some-button">button!</button>
                </div>
                <div class="col-xs-8 cell">
                    <h4 class="panel-title pull-left heading">
                        <a>Some string that's really longish and stuff hehe right? (looooong long long)</a>
                    </h4>
                </div>
                <div class="col-xs-2 cell">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">a</button>
                        <button type="button" class="btn btn-default">b</button>
                        <button type="button" class="btn btn-default">c</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 3

为什么不将按钮和按钮组放入h4元素？还可以从div元素中拉出。 Here is a fiddle with everything line up。我不知道这是否是你正在寻找的，但我在css类中添加了一个中心对齐，并从面板标题元素中删除了左拉。我还把按钮扔进了标题元素

<h4 class="panel-title heading">
    <div class="pull-left">
  <button type="button" class="btn btn-default some-button">
    button!
  </button>
</div>
  <a>
    Some string (short)
  </a>
    <div class="btn-group pull-right">
  <button type="button" class="btn btn-default">a</button>
  <button type="button" class="btn btn-default">b</button>
  <button type="button" class="btn btn-default">c</button>
</div>
</h4>

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

3 个答案: