Twitter Bootstrap:中心药丸 [英] Twitter Bootstrap: Center Pills

问题描述

我的问题是如何让药丸居中?

我尝试在周围添加中心块并将 float:left 更改为 float:center 但没有任何帮助.

解决方案

这变得简单多了！ 你只需要在容器上使用 text-center 类，并将 display:inline-block 应用到 ul.只需确保您有一个换行符或段落标记将导航与容器内的任何其他元素分隔开.

完成！2 个类添加，1 行 CSS(不要修改 bootstrap css 文件！).

HTML:

<p>版权内容</p><ul class="nav nav-pills center-pills"><li><a href="#">页脚导航链接</a></li><li><a href="#">页脚导航链接</a></li>

CSS:

.center-pills { display: inline-block;}

Edit 2015:正如 Artur Beljajev 提出的，Flexbox 支持现在很常见，你可能想要改为使用它:

.center-pills {显示:弹性；对齐内容:居中；}

My question is how you can center the pills?

I've tried to add center block around and also to change the float:left to float:center but nothing helps.

解决方案

This has gotten much simpler! You just need to use the text-center class on the container, and apply display:inline-block to the ul. Just make sure you have a line break or paragraph tag separating the nav from any other elements within the container.

Done! 2 class additions, 1 line of CSS (don't modify the bootstrap css file!).

HTML:

<div class="col-md-12 text-center">
    <p>Copyright stuff</p>
    <ul class="nav nav-pills center-pills">
        <li><a href="#">Footer nav link</a></li>
        <li><a href="#">Footer nav link</a></li>
    </ul>
</div>

CSS:

.center-pills { display: inline-block; }

Edit 2015: As Artur Beljajev has brought up, Flexbox support is now common enough that you may want to use that instead:

.center-pills {
    display: flex;
    justify-content: center;
}

这篇关于Twitter Bootstrap:中心药丸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！