我想通过 bootstrap4 在不同的行中制作一个图标，文本

Question

我想用bootstrap4做一个图标，文字在不同的行

伙计们，我正在通过bootstrap4练习初级水平；我在挣扎；第一行中间的图标和第二行h3的副标题无法制作。

我用 h3 放置了文本，然后通过 class 添加了一个图标，这影响了与文本位于同一行的图标。然而，这不是我想要的。

我又改过来了，所以我按网格创建了三个列，我把图标一起放到了div中，但是效果更差.....样式by h3，第3行的按钮文字失去了文字样式

请告知解决方案，以便我完成挑战。

非常感谢！

  <html>

<head>
  <meta charset="utf-8">
  <title>TinDog</title>
  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;700&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">

  <link rel="preconnect" href="https://fonts.gstatic.com">

  <!-- css stylesheet -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
  <!-- fontawesome -->
  <script src="https://kit.fontawesome.com/e2fafd992e.js" crossorigin="anonymous"></script>

  <!-- Bootstrap Script -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<body>

  
  <section id="features">

    <div class="container">
      <div class="row">
        <div class="col fas fa-check-circle">
          <h3>Easy to use.</h3>
          <p>So easy to use, even your dog could do it.</p>
        </div>

        <div class="col fas fa-bullseye">
          <h3>Elite Clientele</h3>
          <p>We have all the dogs, the greatest dogs.</p>
        </div>
        <div class="fas fa-heart">
        <h3>Guaranteed to work.</h3>
          <p>Find the love of your dog's life or your money back.</p>
        </div>
      </div>
    </div>
    
    </body>

</html>

Answer 1

您可以将 text-center class 添加到 row 以使图标居中：

<div class="row text-center">
    ...
</div>

要修复列中的字幕，您需要将图标 class 移出列的样式。现在你有这样的东西：

<div class="col fas fa-icon">
    <h3>Subtitle</h3>
</div>

...rest of the columns

h3 副标题的样式（实际上是整个栏的样式）被 fas fa-icon 图标 class 覆盖。将图标放在列中，像这样解决该问题：

<div class="col">
    <i class="fas fa-icon"></i>
    <h3>Subtitle</h3>
</div>

...rest of the columns

<html>

<head>
    <meta charset="utf-8">
    <title>TinDog</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;700&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://kit.fontawesome.com/e2fafd992e.js" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>
    <section id="features">
        <div class="container">
            <div class="row text-center">
                <div class="col"><i class="fas fa-check-circle"></i>
                    <h3>Easy to use.</h3>
                    <p>So easy to use, even your dog could do it.</p>
                </div>
                <div class="col"><i class="fas fa-bullseye"></i>
                    <h3>Elite Clientele</h3>
                    <p>We have all the dogs, the greatest dogs.</p>
                </div>
                <div class="col"><i class="fas fa-heart"></i>
                    <h3>Guaranteed to work.</h3>
                    <p>Find the love of your dog's life or your money back.</p>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

Answer 2

嗨，我终于成功了，我相信我解决了这个问题。谢谢大家

<div class="row">
  <div class="features-box col-lg-4 col-md-3">
    <i class="icon fas fa-check-circle fa-4x"></i>
    <h3>Easy to use.</h3>
    <p class="sub-title">So easy to use, even your dog could do it.</p>
  </div>

  <div class="features-box col-lg-4 col-md-3">
    <i class="icon fas fa-bullseye fa-4x"></i>
    <h3>Elite Clientele</h3>
    <p class="sub-title">We have all the dogs, the greatest dogs.</p>
  </div>

  <div class="features-box col-lg-4 col-md-3">
    <i class="icon fas fa-heart fa-4x"></i>
    <h3>Guaranteed to work.</h3>
    <p class="sub-title">Find the love of your dog's life or your money back.</p>
  </div>
</div>
</div>

#title{background-color: #ff4c68;
color: #fff;
}

body {
  font-family: "Montserrat";
}

.container-fluid{
  padding: 3% 15%
}

h1{
font-weight: bold;
font-size: 3.5rem;
line-height: 1.5;
}

h2{
  font-family: "Montserrat";
  font-weight: bold;
  font-size: 3.5rem;
  line-height: 1.5;
}

h3{
  font-family: "Montserrat";
  font-weight: bold;
  font-size: 18px;
}

p{
  color: #8f8f8f;
}

/* navigation bar */

.navbar{
  padding: 0 0 4.5rem;
}

.nav-item{
  padding: 0 18px 0 18px;
}

.nav-link{
font-size: 1.2rem;
font-family: "Montserrat";
font-weight: 400;
}


.navbar-brand{
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold;
}

/* download buttons */

.download-buttons{
  position: relative;
  margin: 5% 3% 5% 0;
   right: 40px;
}

/* title-image */
.title-image{
  width:60%;
  -ms-transform: rotate(25deg); /* IE 9 */
  -moz-transform:rotate(25deg);
  -webkit-transform:rotate (25deg);
  transform: rotate(25deg);
}

/* features-section */
#features{
  padding: 7% 15%;
}

.sub-title{
  font-size: 15px;
}

.features-box{
  text-align: center;
  padding: 5%;
}

.icon{
  color: #ef8172;
  margin-bottom: 1rem;
}

.icon:hover{
color: #ff4c68;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TinDog</title>
  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;700&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">

  <link rel="preconnect" href="https://fonts.gstatic.com">

  <!-- css stylesheet -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
  <!-- fontawesome -->
  <script src="https://kit.fontawesome.com/e2fafd992e.js" crossorigin="anonymous"></script>

  <!-- Bootstrap Script -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<body>

<!-- Features -->

  <section id="features">

    <div class="row">
      <div class="features-box col-lg-4 col-md-3">
        <i class="icon fas fa-check-circle fa-4x"></i>
        <h3>Easy to use.</h3>
        <p class="sub-title">So easy to use, even your dog could do it.</p>
      </div>

      <div class="features-box col-lg-4 col-md-3">
        <i class="icon fas fa-bullseye fa-4x"></i>
        <h3>Elite Clientele</h3>
        <p class="sub-title">We have all the dogs, the greatest dogs.</p>
      </div>

      <div class="features-box col-lg-4 col-md-3">
        <i class="icon fas fa-heart fa-4x"></i>
        <h3>Guaranteed to work.</h3>
        <p class="sub-title">Find the love of your dog's life or your money back.</p>
      </div>
    </div>
    </div>


  </section>


</body>

</html>

我想通过 bootstrap4 在不同的行中制作一个图标，文本

I want to make an icon, text in the different row by bootstrap4

html

css

bootstrap-modal

bootstrap-4