【问题标题】: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>
    

    【讨论】:

    • 是的,我实际上并不希望它们被附加,因为当我单击图标时我正在更改 h2innerText。我尝试了我的方式,但它没有水平对齐,也没有他们是并排的吗
    • 哎呀,再看看第二个选项,我搞砸了,没有缩进它,所以它认为它是真正的 html 哈哈
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-04-19
    • 1970-01-01
    • 2017-03-05
    • 2019-11-04
    • 2014-12-17
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多