React+Bootstrap 5中如何移除Carousel组件底部留白

我正在开发一个需要适配移动端的个人项目，目前遇到了Carousel组件底部存在留白的问题，不知道如何移除，希望得到帮助。

PC端效果：
移动端效果：

我想要移除底部的留白，同时确保轮播组件具备响应式特性，请问该如何操作？

提供的代码 #

Carousel组件代码 #

import ...

export default class CarouselBox extends Component{
    render(){
        return(
            
                <Carousel>
                    <Carousel.Item>
                        <img className="d-block w-100"
                        src={edinburghView1}
                        alt="Edinburgh_Uni"
                        />
                    <Carousel.Caption>
                        <Nav.Link href='/EdinburghCity'>
                        <h3>Edinburgh city</h3>
                        <p>Edinburgh city view in 2023</p>
                        </Nav.Link>
                    </Carousel.Caption>
                    </Carousel.Item>
                                
        )
    }
}

Footer组件代码 #

import { MDBFooter } from 'mdb-react-ui-kit';

export default class Footer extends Component {
    render() {
        return (
            <>
    <MDBFooter sticky="bot" bgColor='light' className='text-center text-lg-left' class="fixed-bottom">
      <div className='text-center p-3' style={{
         backgroundColor: '#f8f9fa', 
         marginTop: '0.5%' }}>
        &copy; {new Date().getFullYear()} Copyright:{' '}
        <a className='text-dark' href='https://t.me/koreechdhs'>
          Boiar Kostiatyn
        </a>
      </div>
    </MDBFooter>
            </>
        )
    }
}

1. 移除Carousel底部留白 #

• 覆盖组件默认间距：Bootstrap/MDB的Carousel默认带有margin-bottom，直接用CSS覆盖：

  .carousel {
    margin-bottom: 0 !important;
  }
  .carousel-item {
    padding-bottom: 0 !important;
  }
  

• 处理图片自带空白：部分图片因格式问题底部会留白，给图片添加display: block：

  .carousel-item img {
    display: block;
    line-height: 1;
  }
  

• 压缩Caption占用空间：移动端下Caption的默认边距可能放大留白，针对性调整：

  @media (max-width: 768px) {
    .carousel-caption {
      bottom: 8px;
      padding: 4px 12px;
    }
    .carousel-caption h3 {
      font-size: 1rem;
      margin-bottom: 0.2rem;
    }
    .carousel-caption p {
      font-size: 0.8rem;
      margin-bottom: 0;
    }
  }
  

2. 确保响应式特性 #

• 保留图片的d-block w-100类，这已经能让图片自适应容器宽度；
• 给轮播设置响应式高度，避免不同屏幕下比例失调：

  .carousel-item {
    height: auto;
    min-height: 240px; /* 移动端最小高度 */
  }
  @media (min-width: 768px) {
    .carousel-item {
      min-height: 380px; /* PC端最小高度 */
    }
  }
  

3. 修复Footer布局冲突 #

你的Footer同时使用了sticky="bot"和fixed-bottom，两个定位属性会导致布局异常，保留一个即可，同时移除不必要的margin-top避免和轮播产生间距：

<MDBFooter bgColor='light' className='text-center text-lg-left fixed-bottom'>
  <div className='text-center p-3' style={{
     backgroundColor: '#f8f9fa', 
     marginTop: 0 }}>
    &copy; {new Date().getFullYear()} Copyright:{' '}
    <a className='text-dark' href='https://t.me/koreechdhs'>
      Boiar Kostiatyn
    </a>
  </div>
</MDBFooter>

内容的提问来源于stack exchange，提问作者Константин Николаевич Бояр II