React Bootstrap 4对齐标题中的项目答案

【问题标题】：React Bootstrap 4 Align Items in HeaderReact Bootstrap 4对齐标题中的项目
【发布时间】：2019-06-26 07:48:47
【问题描述】：

我正在使用 react bootstrap v1.0.0-beta.5，它使用 bootstrap 4。

我正在尝试创建一个在一侧对齐文本并在另一侧对齐省略号的标题，当您单击它时会下拉操作。

我已经尝试过使用

<FaEllipsisH className="justify-content-end"/>

我该怎么办？

   <Card style={{ width: '22rem' }} className="pCard" border="dark">
     <Card.Header>
       <FaAmazon/> {product.content}
       <FaEllipsisH className="justify-content-end"/>
     </Card.Header>
     <Card.Body>
       <Card.Title> <FaFileInvoice/> <span className="Home orderNo"><a href={`/products/${product.productId}`}>{product.productId}</a></span></Card.Title>
       <Card.Text>Item</Card.Text>
      </Card.Body>
    </Card>

关联的 CSS

.Home .pCard {
  font-size: 0.8em;
  margin-bottom: 10px;
  margin-top: 5px;
  display: flex;
}

【问题讨论】：

看起来像弹性盒子，在这种情况下你的父容器需要有display: flex属性。
我添加了，但没有任何区别

标签： reactjs bootstrap-4 jsx react-bootstrap

【解决方案1】：

使用 flexbox 中的 justify-content: space-between。你可以使用 Bootstrap 的 flex utility 类：

<Card.Header className="d-flex justify-content-between">

【讨论】：