引导5固定底部页脚覆盖内容

Question

我试着用固定底部的react和引导来做一个固定的页脚，问题是它涵盖了一些内容，已经尝试了一些东西，但是没有起作用，我如何修复呢？(代码和演示)

页脚代码：

            <MDBFooter bgColor='light' className='text-center text-lg-start text-muted mt-auto fixed-bottom'>
                <section className='d-flex justify-content-center justify-content-md-center p-2 border-bottom'>
                    <div className='me-5'>
                        <span>Siga nas redes sociais</span>
                    </div>

                    <div>
                        <a href='' className='me-4 text-reset'>
                            <i className='fab fa-facebook-f'></i>
                        </a>
                        <a href='' className='me-4 text-reset'>
                            <i className='fab fa-twitter'></i>
                        </a>
                        <a href='' className='me-4 text-reset'>
                            <i className='fab fa-instagram'></i>
                        </a>
                    </div>
                </section>

                <section>
                    <div className='container text-center text-md-start mt-2'>
                        <div className='row mt-3'>
                            <div className='col-md-3 col-lg-4 col-xl-3 mx-auto mb-4'>
                                <h6 className='text-uppercase fw-bold mb-4'>
                                    <i className='fas fa-gem me-3'></i>Lorem Ipsum
                                </h6>
                                <p>
                                    Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet,
                                    consectetur adipisicing elit.
                                </p>
                            </div>

                            <div className='col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4'>
                                <h6 className='text-uppercase fw-bold mb-4'>Contato</h6>
                                <p>
                                    <i className='fas fa-envelope me-3'></i>
                                    info@example.com
                                </p>
                                <p>
                                    <i className='fas fa-phone me-3'></i> + 01 234 567 88
                                </p>
                            </div>
                        </div>
                    </div>
                </section>

                <div className='text-center p-4' style={{ backgroundColor: 'rgba(0, 0, 0, 0.05)' }}>
                    © 2022 Copyright:
                    <a className='text-reset fw-bold' href='https://mdbootstrap.com/'>
                        lorem.com
                    </a>
                </div>
            </MDBFooter>

演示：https://imgur.com/b4DBYnZ

Answer 1

修正了在页面内容中使用最小高度属性的问题.

Answer 2

我们把320 We作为目前可用的最小移动屏幕。低于这个水平对于今天的设备来说是不必要的。我看得出来你在查280 on的那一页。

我怀疑您是否在页脚中添加了任何粘性属性？-如果是，请在该级别上删除它。