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

【问题标题】：I want to make an icon, text in the different row by bootstrap4我想通过bootstrap4在不同行中制作一个图标，文本
【发布时间】：2021-06-01 13:15:24
【问题描述】：

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

伙计们，我正在通过 bootstrap4 进行初学者练习；我在挣扎；我无法在第一行的中心制作图标，在第二行制作 h3 的字幕。

我用 h3 放置文本，然后按类添加图标，这会影响与文本在同一行中的图标。然而，这不是我想要的。

再一次，我反过来改了，所以我用grid创建了三列，把icon一起放到了div里，但是效果更差.....h3的样式和按钮文字第三行的文字样式丢失了。

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

感谢并高度赞赏！

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

【问题讨论】：

标签： html css bootstrap-4 bootstrap-modal

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

...rest of the columns

h3 字幕的样式（实际上是整列的样式）被fas fa-icon 图标类覆盖。将图标放在列中，这样可以解决该问题：

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

【讨论】：

@anpanman - 如果我的回答中有任何不清楚的地方，或者您有任何其他问题，请告诉我，以便我澄清。
谢谢，我想知道，如何将图像放大？
我试图为 .i 类 {width:100%;} 添加 css 但没有效果。
我也尝试添加 padding-top: 30px;在CSS中，但它无法工作。我在 CSS 中添加的是 .icon{ width:100%; padding-top: 30px;} 和 HTML 是

易于使用。

如此易于使用，即使您的狗也能做到。
@anpanman FontAwesome 图标有文档，如果您想知道如何正确使用它们，您可能应该阅读它们。只需访问他们的网站并阅读文档！这是有关如何将图标尺寸变大的文档文章here

易于使用。