我想通过bootstrap4在不同行中制作一个图标，文本
Posted
技术标签:
【中文标题】我想通过bootstrap4在不同行中制作一个图标，文本【英文标题】：I want to make an icon, text in the different row by 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>【问题讨论】：
【参考方案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>
#titlebackground-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以上是关于我想通过bootstrap4在不同行中制作一个图标，文本的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Bootstrap 4 中使用 Font Awesome 中的 svg 图标？
如何通过 VueJS 在 Laravel 中使用 Bootstrap 4 图标
如何在 bootstrap4 导航栏中对齐社交媒体图标及其工具提示？