将图标对齐到标题旁边答案

【问题标题】：Align icon to be right beside the header将图标对齐到标题旁边
【发布时间】：2017-03-10 10:34:27
【问题描述】：

我目前正在尝试在标题旁边放置一个图标。但是，我尝试了，但它一直没有对齐。我可以知道为什么吗？

这是我尝试过的代码

<div class="row">
    <div class="col-lg-1">
    </div>
    <div class="col-lg-8">
        <div class="row">
            <h2 id="ContentPlaceHolder1_courseDetail" class="col-lg-11">Course Details</h2>
            <span class="glyphicon glyphicon-exclamation-sign "></span>
         </div>
         <h5 id="lblLastModifiedDate" class="col-lg-12">Last Modified Date: 21/10/2016 3:02:35 PM</h5>
    </div>
</div>

【问题讨论】：

标签： css asp.net twitter-bootstrap-3

【解决方案1】：

span 允许在你的 h2 标签内，以便它显示在文本旁边

<h2 id="ContentPlaceHolder1_courseDetail" class="col-lg-11">Course Details <span class="glyphicon glyphicon-exclamation-sign "></span></h2>

此外，如果您实际上并不希望它们像这样附加，您已经设置好自己以其他方式并排显示它们

<h2 id="ContentPlaceHolder1_courseDetail" class="col-lg-11">Course Details</h2>
<span class="glyphicon glyphicon-exclamation-sign col-md-1"></span>

虽然不建议这样做，因为第一个选项看起来更好看，因为后一个选项会由于引导程序的列系统而在它们之间产生差距

如果您不希望它们彼此相邻显示，您也可以这样做

    <h2 class="col-lg-11"><span id="ContentPlaceHolder1_courseDetail">Course Details</span><span class="glyphicon glyphicon-exclamation-sign col-md-1"></span></h2>

【讨论】：

是的，我实际上并不希望它们被附加，因为当我单击图标时我正在更改 h2 的 innerText。我尝试了我的方式，但它没有水平对齐，也没有他们是并排的吗
哎呀，再看看第二个选项，我搞砸了，没有缩进它，所以它认为它是真正的 html 哈哈