html - 在 Flexbox 中的图标旁边以堆栈模式显示文本

Question

我有一个评论图标，我想在它旁边显示评论数和“评论”一词。

但是“评论”这个词应该显示在数字下面，而不是旁边。

类似这个

到目前为止，文本并排显示。

演示 https://jsfiddle.net/halnex/d5sft5pt/9/

HTML

<div class="post-meta-alt">
  <div class="social-share-top">
    <span class="social-share-top-text">Share</span>
    <a class="btn btn-social-icon btn-facebook">
      <span class="fa fa-facebook"></span>
    </a>
    <a class="btn btn-social-icon btn-twitter">
      <span class="fa fa-twitter"></span>
    </a>
    <a class="btn btn-social-icon btn-google">
      <span class="fa fa-google"></span>
    </a>
    <a class="btn btn-social-icon btn-pinterest">
      <span class="fa fa-pinterest"></span>
    </a>
  </div>
  <div class="comments-top">
    <a class="btn btn-social-icon btn-pinterest">
      <span class="fa fa-comment"></span>
    </a>
    <p>78</p>
    <p>Comments</p>
  </div>
  <div class="author-top">
    author name
  </div>
</div>

CSS

.post-meta-alt {
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    padding: 20px 0;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
}
.post-meta-alt span.social-share-top-text {
    text-transform: uppercase;
    margin-right: 10px;
}
.post-meta-alt .comments-top,
.post-meta-alt .author-top {
  display: inline-flex;
  margin-left: 20px;
}

PS:这是使用 Bootstrap 的正确方法吗？使用 Flexbox 还是有更好的传统方法来实现这一点？

Answer 1

您需要将段落包装在一个 div 中:

<div class="coment">
      <p>78</p>
      <p>Comments</p>
 </div> 

并添加样式来组织它们

.coment p {
  margin: 3px;
  line-height: 1;
}

See jsfiddle