html - 在 FontAwesome 图标旁边对齐 Bootstrap 中的文本

Question

我在将标题和段落文本“井井有条”地对齐时遇到困难。您看到的“无”是一个删除特定边距的类，与我要实现的目标无关。

这是我的代码

<div class="col-md-4 none">
    <div class="well none">
        <i class="fa fa-user fa-4x fa-fw"></i>
        <h3>Test</h3>
        <p>text goes here</p>
    </div>
</div>

这是它在做什么以及我希望它做什么。

感谢您的帮助!

Answer 1

我建议你对你的 html 结构做一些小改动，将你的文本内容包装在 div 中，并将其显示设置为 inline-block

<div class="col-md-4 none">
    <div class="well none">
        <i class="fa fa-user fa-4x fa-fw"></i>
        <div class="text">
           <h3>Test</h3>
           <p>text goes here</p>
        </div>
    </div>
</div>

那个额外的 div 的 css 是

.text {
    display:inline-block;
}

Js Fiddle Demo