【问题标题】:Bootstrap 3 align button text underneath GlyphIconBootstrap 3 在 GlyphIcon 下对齐按钮文本
【发布时间】:2014-12-17 20:47:11
【问题描述】:

我有这段代码可以创建一些带有 GlyphIcon 和一些文本的 Bootstrap 3 按钮,但问题是文本在图标的右侧对齐。如何对齐图标下方的文字?

<div class="btn-group">
    <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-file"></span>Archive</button>
    <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-trash"></span>Delete</button>
</div>
<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-share"></span>Resend</button>

【问题讨论】:

    标签: css button twitter-bootstrap-3 glyphicons


    【解决方案1】:

    text-center 辅助类添加到.btn,并在图标之后、文本之前添加&lt;br&gt;

    <button type="button" class="btn btn-default btn-lg text-center"><span class="glyphicon glyphicon-share"></span><br>Resend</button>
    

    演示:http://www.bootply.com/SWzsbPwPWC

    【讨论】:

    • +1 如此简单,而且有效。我会尽快接受答复