如何根据内容的高度/长度对齐 React-Bootstrap 中卡片的内容？答案

【问题标题】：How to align the contents of card in React-Bootstrap based on the content's height/length?如何根据内容的高度/长度对齐 React-Bootstrap 中卡片的内容？
【发布时间】：2021-11-22 00:02:53
【问题描述】：

我想对齐卡片的内容，这样当内容的标题太长时，Created on、By 和 View 等其他详细信息将位于同一行。我已经尝试使用带有min-height 的固定高度作为标题行，但我认为这不是一个好的解决方案，因为当标题较短时，会有很多空白/空白空间。

我也尝试在标题上使用flex-grow: 1，但它也不会填满空白处。

         <Col>
            <Card 
                className='text-center' 
                style={{
                    height: '100%',
                    padding: '15px', 
                    borderRadius: '20px',
                    boxShadow: '0px 5px 15px 0px rgb(0 0 0 / 20%)'
                }}
            >
                <Row style={{marginBottom: '5px'}}>
                    <Col md={6} style={{textAlign: 'left'}}>
                        <div 
                            className='btn btn-success'}
                            style={{padding: '5px 25px', borderRadius: '50px', cursor: 'default', textTransform: 'capitalize'}}
                        >
                            {bulletin.liveStatus}
                        </div>
                    </Col>
                    <Col md={6} style={{textAlign: 'right'}}>
                        <div className='ellipsis-menu' ref={ref}>
                            <FaIcons.FaEllipsisH onClick={showDropDown} style={{cursor: 'pointer'}} />
                    </Col>
                </Row>
                <div className='view-bulletin-link'>
                    <Card.Img variant='top' src={imageCoverUrl} style={{objectFit: 'cover', height: '15rem', width: '100%', display: 'block'}}/>
                    <Card.Body>
                        <Card.Title style={{fontSize: '1rem'}}><strong>{bulletin.title}</strong></Card.Title>
                        <Card.Text>Created on {moment(bulletin.createdDate).format("DD/MM/YYYY")} <br />By {bulletin.createdBy}</Card.Text>
                        <Card.Text>{bulletin.viewCount > 1 ? <>{bulletin.viewCount} Views</> : <>{bulletin.viewCount} View</>}</Card.Text>
                    </Card.Body>
                </div>
            </Card>
        </Col>

【问题讨论】：

标签： css reactjs react-bootstrap

【解决方案1】：

你可以用 flex 来实现。

卡片内容应该有

flex-direction: col;
align-items: space-around

并将顶部和底部对齐的元素包装在不同的 div/spans 中。

【讨论】：

【解决方案2】：

您可以将created 和view count 组合在一起，使其位于底部。

见下例

<div style="postion:absolute; bottom: 0">
                        <Card.Text>Created on {moment(bulletin.createdDate).format("DD/MM/YYYY")} <br />By {bulletin.createdBy}</Card.Text>
                        <Card.Text>{bulletin.viewCount > 1 ? <>{bulletin.viewCount} Views</> : <>{bulletin.viewCount} View</>}</Card.Text>

</div>

【讨论】：