引导卡页脚未正确格式化为第二行答案

【问题标题】：Bootstrap Card Footer Not Formatting to Second Row Correctly引导卡页脚未正确格式化为第二行
【发布时间】：2020-06-20 10:43:14
【问题描述】：

我对尝试使用 Bootstrap 格式化卡片页脚感到沮丧。我想要实现的是在页脚的顶行获得评级星，在页脚的底行获得标题和价格。

<div className="card-footer d-flex  mb-0">

        <div className="row">
          <div className="col">
            <Rating _id={_id} />
          </div>
        </div>

        <div className="row justify-content-between">
          <div className="col">
            <p className="align-self-center mb-0 ">
              {title}
            </p>
            <h5 className="text-blue font-itealic mb-0"><span className="mr-1">$</span>{price}</h5>

          </div>
        </div>
      </div>

这张图片显示了我的代码的错误结果。

下一张图片显示了我想要实现的目标。

顺便说一句，如果重要的话，我会使用 React。任何帮助都将不胜感激。

【问题讨论】：

标签： css reactjs bootstrap-4

【解决方案1】：

让我看看能不能帮到你。尝试在该页脚上使用 CSS 网格，如下所示：

<div className="card-footer d-flex  mb-0">
  <div className="foot-grid">

    <div className="rating">
        <Rating _id={_id} />
    </div>
    <div className="title">
       <p className="text-center">{title}</p>
    </div>
    <div className="price">
      <h5 className="text-blue font-italic mb-0"><span className="mr-1">$</span>{price}</h5>
    </div>

  </div>
</div>

你的 css 是这样的：

.foot-grid{ 
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   padding: 0 1rem;
}
.foot-grid>.rating{
   grid-column: 1/-1;
}
.foot-grid>.title{ text-align: left; }
.foot-grid>.price{ text-align: right; }

编辑：<Rating /> 里面的第一个包装器是 div 元素？ ?

应该够了，希望对你有所帮助。如果没有，请告诉我编辑我的答案。

【讨论】：

谢谢@benjamin。那效果很好。你介意解释一下CSS吗？请特别解释 .foot-grid 和 .foot-grid.rating。 Rating 是一个显示评级星星的 React 组件。
.foot-grid、.rating、title 和 .price 是 css 类选择器。那些名字是随意选择的，我只是认为那些会是好名字。现在，它是如何工作的？首先， .foot-grid 显示网格将使该容器成为一个网格容器，它允许本地创建多行和多列网格。 grid-template-columns: repeat(2, 1fr) 与 grid-template-columns: 1fr 1fr 相同，它将每行分隔为 2 个等宽列。然后，padding: 0 1rem 是可选的，仅用于创建内边距。
任何来自网格容器的直接子级，都将能够使用一些功能，让您可以将它们放置在任何您想要的位置。默认情况下，每个元素都将按照代码顺序放置在每一列上，如果没有更多可用列，则跳转到下一行。所以，我使用.foot-grid>.rating{ grid-column: 1/-1 } 专门告诉 .rating 来占用整行。然后，.title 和 .price 将遵循常规流程，所以我不需要告诉他们我希望他们在哪里（我可以，但我不需要）。
最后，.foot-grid>.title{ text-align: left; } 和 .foot-grid>.price{ text-align: right; } 只是常规的文本对齐方式，因为 .title 和 .price 包含基于文本的元素。注意：我选择 .foot-grid>.rating´ and .foot-grid>.title´ aa 和 .foot-grid>.price´ to make sure this does not affect any other element with .rating, .title or .price classes, but it would also work without .foot-grid>` 虽然我不推荐它。

【解决方案2】：

或许对你有帮助

<div className="card-footer d-flex  mb-0">

    <div className="row">
      <div className="col">
        <Rating _id={_id} />
      </div>
    </div>

    <div className="row justify-content-between">
      <div className="col">
        <p className="align-self-center mb-0 ">
          {title}
          <span className="text-blue font-itealic mb-0"><span className="mr-1">$</span>{price}</span>
        </p>


      </div>
    </div>
  </div>

【讨论】：

我尝试了您的解决方案，但没有发现差异。