reactjs 为什么react-bootstrap正文(Card.text)显示在框外

avkwfej4  于 2023-05-22  发布在  React
关注(0)|答案(1)|浏览(177)

我正在尝试在我的页面上添加react-bootstrap卡。除了Card. text之外,所有元素都保留在卡中。任何帮助将不胜感激。
这就是代码:

import React from 'react';
import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';

function ContactCards() {
  return (
    <Card style={{ width: '22rem' }}>
      <Card.Img variant="top" src="https://static.marham.pk/assets/images/home-new/specialities/derma.png" />
      <Card.Body>
        <Card.Title>Dr.Khan</Card.Title>
        <Card.Text>
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </Card.Text>
        <Button variant="primary">Go somewhere</Button>
      </Card.Body>
    </Card>
  );
}

export default ContactCards;
3pmvbmvn

3pmvbmvn1#

我认为style={{width:22rem}}的固定宽度可能是问题的原因,请再次删除固定宽度约束。
或者
尝试在<Card className='d-flex'>中使用flexbox,并使用className='flex-wrap'引导类 Package <Card.text>。因此,<Card.text>中的文本根据卡片的尺寸进行换行。

<Card className='d-flex'>
  <Card.Img variant="top" src="https://static.marham.pk/assets/images/home-new/specialities/derma.png" />
  <Card.Body>
    <Card.Title>Dr.Khan</Card.Title>
    <Card.Text className='d-flex flex-wrap'>
      Some quick example text to build on the card title and make up the
      bulk of the card's content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>

相关问题