React Bootstrap 4 выравнивание элементов в заголовке - PullRequest
Новая
       44

React Bootstrap 4 выравнивание элементов в заголовке

0 голосов
/ 01 февраля 2019

Я использую реагирующую загрузку v1.0.0-beta.5, которая использует начальную загрузку 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;
}

1 Ответ

0 голосов
/ 01 февраля 2019

Используйте justify-content: space-between от flexbox.Вы можете использовать утилиту Bootstrap flex классы: 

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