如何将 Card.Text Next 添加到 carousel 内的图像，然后添加到 card.img

问题描述

我想将 {item.message} 放在 Card Image 旁边。如何做到这一点

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 属性旁边

解决方法

我是这样解决的

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>

现在看起来像下面这样