Question

嘿，我的页脚上方随机有空白，我想弄清楚如何摆脱它。我什至不知道为什么首先在其上方有这么多空白。图像中的页脚是红色空间。我正在使用引导程序4并做出反应。

.app-body {

        padding-top: calc(52px + 15px);
    }
    .extra-footer-padding {
        padding-bottom: calc(35px + 15px);
    }

ForgotpasswordPage

   render() {
        const { email, loading, success } = this.state;

        return (
            <div class='container-fluid'>
                <div class='col-md-10 mx-auto bg-light'>
                    <div class='col-md-10 mx-auto pt-5 pb-3'>
                        {
                            RenderIf(!success,
                                <div>
                                    <Link to='/'><img src={ Constants.APP_LOGO } alt='logo' width='75' height=' 75' /></Link>
                                    <h5 class='mt-2'>Reset your {Constants.APP_NAME} password</h5>
                                    <div class='form-group mt-3'>
                                        <label for='email'>Email</label>
                                        <input id='email' type='text' class='form-control' aria-describedby='emailHelp' placeholder='Enter your email' onChange={ (event) => this.setState({ email: event.target.value }) } onKeyPress={ (event)=> event.key === 'Enter' ? resetPassword(this, email) : null } disabled={ loading } required />
                                        <small id='emailHelpBlock' class='form-text text-muted'>You will be sent instructions on how to reset your password.</small>
                                    </div>
                                    <button type='button' class='btn btn-primary oval-button' onClick={ () => resetPassword(this, email) } disabled={ loading || email.length === 0 }>Reset Password</button>
                                </div>
                            )
                        }
                        {
                            RenderIf(success,
                                <div class='text-center'>
                                    <div class='d-block w-100 mb-5'>
                                        <i class='far fa-check-circle fa-10x text-success' />
                                    </div>
                                    <h3>Password Reset Email Sent</h3>
                                    <p class='mb-0'>An email has been sent to your email address, {email}. Follow the directions in the email to reset your password</p>
                                </div>
                            )
                        }
                    </div>
                </div>
            </div>
        );
    };
};

脚

    render() {
        const { location } = this.props;

        return (
            <footer class='footer navbar navbar-expand-md footer-fixed-size fixed-bottom'>
                <ul class='navbar-nav'>
                    {
                        navigation.map((element, index) => (
                            <li key={ index } class={`nav-item${ isActive(location, element.path) ? ' active' : '' } `}>
                                <Link class='nav-link' to={ element.path }>{element.title}</Link>
                            </li>
                        ))
                    }
                </ul>
                <p class='ml-auto mb-0'>&copy; {Constants.APP_NAME} {Constants.APP_COPYRIGHT}</p>
            </footer>
        );
    };
};

Answer 1

我的页脚计算已关闭。

.extra-footer-padding {
    padding-bottom: calc(35px + 400px);
}

摆脱页脚上方的随机空白

1 个答案: