Question

如图所示，我想使用字体真棒图标创建这种类型的网格。我为此编写代码，但我没有得到输出，我希望获得输出，如图所示。我为此做了什么？

<div class="container">
             <div class="col-lg-12">
                <h1 style="color:#0E57A4;"><center>24X7 Emergency Responce</center></h1><br><br>
            </div>
                <div class="row">
                    <div class="col-md-6">

                        <div class="media-left"> <i class="fa fa-home fa-5x"></i>
                             </div>
                            <div class="media-body">
                                <h4 style="color:#0e57a4;">Resenditial Services</h4>
                                <p class="para">Steamatic knows that the health and safety of your family is your first concern. Our restoration and cleaning services are all about providing you with the healthiest indoor environment possible.</p>
                            </div>

                     </div>
                    </div>

Answer 1

我稍微调整了你的HTML结构（在media-left和media-body周围添加了一个容器）并添加了一个CSS类来正确定位这两个元素。

＆＃13;

.flex {
  display: flex;
  align-items: center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-lg-12">
    <h1 style="color:#0E57A4;">
      <center>24X7 Emergency Responce</center>
    </h1><br><br>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class=" flex">
        <div class="media-left"> <i class="fa fa-home fa-5x"></i>
        </div>
        <div class="media-body">
          <h4 style="color:#0e57a4;">Resenditial Services</h4>
        </div>
      </div>
      <p class="para">Steamatic knows that the health and safety of your family is your first concern. Our restoration and cleaning services are all about providing you with the healthiest indoor environment possible.</p>
    </div>
  </div>

＆＃13;

Answer 2

使用此HTML代码，希望这会对您有所帮助。

＆＃13;

<div class="container">
  <div class="col-lg-12">
    <h1 style="color:#0E57A4;"><center>24X7 Emergency Responce</center></h1><br><br>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="media-left"> <i class="fa fa-home fa-5x"></i>
      </div>
      <div class="media-body">
          <h4 style="color:#0e57a4;">Resenditial Services</h4>
          <p class="para">Steamatic knows that the health and safety of your family is your first concern. Our restoration and cleaning services are all about providing you with the healthiest indoor environment possible.</p>
      </div>
     </div>
     <div class="col-md-6">
       <div class="media-left"> <i class="fa fa-home fa-5x"></i>
       </div>
       <div class="media-body">
           <h4 style="color:#0e57a4;">Resenditial Services</h4>
           <p class="para">Steamatic knows that the health and safety of your family is your first concern. Our restoration and cleaning services are all about providing you with the healthiest indoor environment possible.</p>
       </div>
      </div>
  </div>
</div>

＆＃13;

使用font awesome图标创建网格

2 个答案: