时间戳

首页 > 解决方案 > 将图标添加到 jumbotron 中的标题项

html - 将图标添加到 jumbotron 中的标题项

问题描述

我有以下jumbotron：

在此处输入图像描述

通过创建：

<div class="col-sm-2">
      <div class="jumbotron jumbotron-fluid top-space">
        <div class="container">
            <h1 class="display-6">Initiatives</h1>

            <p class="lead">The other good stuff.</p>
            <ul>
                <li>
            <a href="">Start an Initiative &#187;</a></li>
                <li>
            <a href="">More Information &#187;</a></li>
            </ul>
        </div>
    </div>
    <div class="jumbotron jumbotron-fluid top-space">
        <div class="container">
            <h1 class="display-6">News</h1>
            <p class="lead">Our Search Tool. <br> Love at first, second, third, fourth, fifth, and sixth sight.</p>
            <a href="">Try it out &#187;</a>
        </div>
    </div>
</div>

我想要一个红色方块上的图标。如何添加并将其与我的 h1、display-6 对齐？

标签： htmlbootstrap-4

解决方案

.col-sm-2 > div:first-child .display-6::after{
  content: "" ;
  width: 40px;
  height: 40px;
  background-color: red;
  display: block;
  margin-left: 20px;
}
.col-sm-2 > div:first-child .display-6{
 display: inline-flex;   
}
<div class="col-sm-2">
        <div class="jumbotron jumbotron-fluid top-space">
          <div class="container">
              <h1 class="display-6">Initiatives</h1>
  
              <p class="lead">The other good stuff.</p>
              <ul>
                  <li>
              <a href="">Start an Initiative &#187;</a></li>
                  <li>
              <a href="">More Information &#187;</a></li>
              </ul>
          </div>
      </div>
      <div class="jumbotron jumbotron-fluid top-space">
          <div class="container">
              <h1 class="display-6">News</h1>
              <p class="lead">Our Search Tool. <br> Love at first, second, third, fourth, fifth, and sixth sight.</p>
              <a href="">Try it out &#187;</a>
          </div>
      </div>
  </div>

推荐阅读