php - 出现引导警报消息时内容流动

问题描述

我遇到了一个有点令人困惑的问题。我想在激活帐户时在屏幕顶部显示一条警报消息。但问题是当消息显示时，欢迎的蓝色框会向下移动，这是我不想要的。当我关闭警报消息时，内容会出现在它们的真实位置。

这是html代码

<!DOCTYPE html>
<html>
<head>
    <?php include_once('head.php'); ?>
    <title>Sign Up</title>
</head>
<body>

        
        <?php 
            if(isset($_SESSION['act'])) ?>
            <div class="text-center alert alert-primary alert-dismissible fade show" role="alert">
                <?php echo $_SESSION['act']; ?>
                <button type="button" class="close" data-dismiss="alert" aria-label="close">
                    &times;
                 </button>
            </div> <?php
        ?>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-7">
            <div class="message-container">
                <div class="message-inner-box">
                    <div class="title-container clearfix">
                        <p class="heading"> Welcome back, </p>
                        <p class="subheading"> Log In!</p>
                    </div>
                </div>
            </div>

            <div class="image-header">
                <img src="../image/sign up.png" alt="file not found" class="signUp-image">
            </div>
        </div>

            <div class="col-md-5">
                <div class="signuUp-header">
                    <div class="signUp-inner">
                        <form>
                            <div class="form-header">
                                <input type="text" class="input-field" placeholder="Enter Email">
                            </div>
                            <div class="form-header">
                                <div class="input-group">
                                    <input type="password" id="password" class="input-field" placeholder="Password" />
                                    <div class="input-group-append">
                                    <span class="input-group-text"><i class="fas fa-lock" id="passwordSeen"> </i></span>    
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-header">
                                <div class="forgetPassword text-right"> 
                                    <a href="forgetpassword.php">forget Password </a>
                                </div>
                            </div>
                            
                            <div class="form-header rememberMe">    
                                <input type="checkbox" class="" />
                                <label class="form-check-label"> Remember me </label>
                            </div>
                            <div class="form-header">
                                <input type="submit" class="signUpButton" name="submit"/>
                            </div>
                        </form>

                        <div class="signUpFooter text-center">
                            <span> I'm a new member <a href="signup.php"> Sign Up</a></span>
                        </div>
                    </div>
                </div> 
            </div>

        </div>
    </div> 

<script src="../javascript/app.js"> </script>
</body>
</html>

这是css代码

/*Message box*/
.message-inner-box{
    height: 300px;
    width:  300px;
    border-radius: 50%;
    margin-top: -3.2em;
    margin-left: -5em;
    background-color: var(--message-box-color);
    display: flex;
    justify-content: center;
    align-items: center;
}
.title-container {
    margin-top: 50px;
    color: var(--message-color);
}
.title-container p {
    margin: 0;
}
.heading {
    font-size: 1.3em;
    font-weight: 600;
}
.subheading {
    font-size: 2em;
    font-weight: 800;
} 


/*Sign Up page*/

.signUp-image {
    height: 60%;
    width:  60%;
}
.signuUp-header {
    padding-top: 5rem;
}
.form-header {
    margin-bottom: 2.5em;
}
.input-field {
    height: 3em;
    width: 80%;
    padding: .3rem 2rem;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid var(--input-field-color);
    border-radius: 5px;
}

标签： phphtmlcssbootstrap-4

php - 出现引导警报消息时内容流动

问题描述

解决方案

推荐阅读