Question

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

这是我尝试过的代码

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

Answer 1

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

虽然不建议这样做，因为第一个选项更好看，因为后者的选择会因为bootstrap的列系统而在它们之间产生差距

如果您不希望它们彼此相邻显示，您也可以执行此类操作

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

将图标对齐标题旁边的图标

1 个答案: