css - 将图标对齐到标题旁边

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

这是我尝试过的代码

<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>

最佳答案

跨度允许在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>

关于css - 将图标对齐到标题旁边，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40289737/