如何在图标和文本之间留出更多空间？

Question

我在将Bootstrap与CSS结合使用时遇到了麻烦，但仍在通过Flex学习Bootstrap文档。我不能给他们更多的空格，因为当我给空白时，文本始终跟随图标。我需要一个解决方案来使结果与我想要的一样。我使用Bootstrap 4。

我的结果：

我想要的结果：

这是First Image（我的结果）中包含Bootstrap和CSS的代码

div.order-1,div.order-2,div.order-3 {
  color: #3379EA;
  margin: auto;
  margin-top:30px;
}

div.order-1 {
  border-right: 3px solid #3379EA;

}

div.order-3 {
  border-left: 3px solid #3379EA;
}

i.fas {
  color: #3379EA;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div class="d-flex flex-nowrap justify-content-end" style="margin-top:30px;margin:auto;"><!-- I put margin again to make them center-->
  <div class="order-1 p-2 justify-content-end text-center font-weight-bold">Smart<br>
    <i class="fas fa-brain fa-2x"></i></div>
  <div class="order-2 p-2 justify-content-end text-center font-weight-bold" >Wise<br>
    <i class="fas fa-lightbulb fa-2x"></i></div>
  <div class="order-3 p-2 justify-content-end text-center font-weight-bold">Accountable<br>
    <i class="fas fa-users fa-2x"></i></div>
</div>
                 </div>
               </div>
            </div>

感谢您的帮助。

Answer 1

主要是使用flex-fill并将文本包装到一个元素中（我使用了span），以便可以在其上设置边框样式。

注意：最好不要使用<br/>进行标记。参见Is it sometimes bad to use <BR />?

.menu {
  margin: 30px;
}

.menu .item {
    color: #3379EA;
    margin: auto;
    margin-top: 30px;
}

.menu .item span {
  color: #515151;
  display: block;
  height: 50px;
  line-height: 50px;
  border-right: 3px solid #3379EA;
}

.menu .item:last-child span {
  border-right: 0;
}

.menu i.fas {
    margin-top: 16px;
    color: #3379EA;
    display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="menu d-flex flex-nowrap">
  <div class="item order-1 justify-content-end text-center font-weight-bold flex-fill">
    <span>Smart</span>
    <i class="fas fa-brain fa-2x"></i></div>
  <div class="item order-2 justify-content-end text-center font-weight-bold flex-fill">
    <span>Wise</span>
    <i class="fas fa-lightbulb fa-2x"></i></div>
  <div class="item order-3 justify-content-end text-center font-weight-bold flex-fill">
    <span>Accountable</span>
    <i class="fas fa-users fa-2x"></i></div>
</div>