Question

我正在使用使用引导程序4的react bootstrap v1.0.0-beta.5。

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

我尝试使用

<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;
}

Answer 1

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

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

React Bootstrap 4在标题中对齐项目

1 个答案: