html - 如何使用 Twitter Bootstrap 和内联列表将标题与工具栏对齐

Question

我想在标题旁边制作一个小工具栏。所以我认为 list-inline 应该工作得很好。它有效，但对齐不正确，我似乎无法弄清楚。

<ul class="list-inline">
<li><h3>Editor</h3> </li>
<li><div class="btn-toolbar editor toolbar" role="toolbar">
    <div class="btn-group">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">right</button>
    </div>
    <div class="btn-group">
            <button type="button" class="btn btn-default">other</button>
    </div>
    </div>
</li>
</ul>

http://jsfiddle.net/yhaJG/1/

Answer 1

以下 CSS 可能是您要查找的内容。虽然很难准确地说出你想从问题中得到什么。

.list-inline { margin-top: 5px; }
.list-inline li { vertical-align: top; }
.list-inline h3 { margin-top: 6px }

只需根据需要调整 margin-top 值即可。

JSFiddle:http://jsfiddle.net/yhaJG/7/

此外，您可能希望向 ul 元素添加另一个类并将样式应用于该元素。您仍然可以在 ul 元素上保留 list-inline，但这样这些样式将不会应用于每个 list-inline，因为那里可能是您网站上内嵌列表的其他用途。