如何将 Card.Text 添加到轮播内的图像旁边，然后添加到 card.img 旁边答案

【问题标题】：How to add Card.Text Next to image inside the carousel and then next to card.img如何将 Card.Text 添加到轮播内的图像旁边，然后添加到 card.img 旁边
【发布时间】：2021-09-09 10:56:06
【问题描述】：

我想把{item.message} 放在卡片图片旁边。如何做到这一点

file.js

<div> 
            <Row>
           <Container>
               <div><h2>Our Mission</h2></div>
               <Carousel pause='hover' variant='dark' className=" my-0 p-0 " >
            {items ? items.map((item) => (
                   <Carousel.Item  key={item._id}>
                            <Card style={{ width: 'auto' ,  height: '30rem', align:'center'}}>
                                <Card.Header>{item.member_of_Panel}</Card.Header>
                                    
                                    <Card.Img src={item.image}/>
                                    <Card.Text>{item.message}</Card.Text>
                                </Card>
                    </Carousel.Item>
            )) : <Loader/>}
            </Carousel></Container>
            
            </Row>
        </div>

index.css是

/* carousel
/* /* .carousel-item-next, */
.carousel-item-prev,
.carousel-item.active {
  display: flex;
} */
.carousel-caption {
  position: absolute;
  top: 0;
}

.carousel-caption h4 {
  color: rgb(5, 63, 27);
}

.carousel img {
  display:block;
  height: 400px;
  width: 400px;
  
  padding: 1px;
  margin: 1px;
  border-radius: 1%;
  margin-left: 10%;
  margin-right: auto;
  align-items: right;
}
.carousel a {
  margin: 0 auto;
}
@media (max-width: 900px) {
  .carousel-caption h2 {
    font-size: 2.5vw;
  }
} *

.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

当前图像完全对齐但是如果我在图像属性之后将文本放在那里它会自动对齐图像的底部。如何实现此功能，以便我可以将 Message 属性放在 img 属性旁边

【问题讨论】：

我阅读了引导文档，无法使用它们的类将图像放在左侧，然后将卡片标题或文本放在右侧

标签： html css reactjs bootstrap-4 react-bootstrap

【解决方案1】：

我通过这种方式解决了这个问题

imports

import { Container, Carousel, Image, Row, Col, Card, ListGroup} from 'react-bootstrap

我通过在 Row 中添加一个 Row 然后添加 2 个 Col 来做到这一点，然后将它们限制为所需的长度。这就是我想要的。

<div> 
            <Row>
           <Container>
               <div><h2>Our Mission</h2></div>
               <Carousel pause='hover' variant='success' className="my-0 p-0" >
            {items ? items.map((item) => (
                   <Carousel.Item  >
                       <Row>
                       <Col md={5}>
                            <Image src={item.image} alt={item.member_of_Panel} fluid />
                       </Col>
                       <Col md={4}>
                            <ListGroup variant="flush">
                                        <ListGroup.Item>
                                           <Card.Title>{item.member_of_Panel}</Card.Title>
                                        </ListGroup.Item>
                                        <ListGroup.Item>
                                            <Card.Body>{item.message}</Card.Body>
                                        </ListGroup.Item>
                            </ListGroup>
                       </Col>
                       </Row>
                    </Carousel.Item>
            )) : <Loader/>}
            </Carousel></Container>
            </Row>
            
        </div>

现在如下所示

【讨论】：