Bootstrap内容未在手机屏幕上全屏显示

问题描述 投票:0回答:2

在此表单中,内容不会在手机屏幕中显示为全屏,但会在计算机和Tab屏幕中正确显示。请提出建议以解决。

enter image description here

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row d-flex">
    <div class="col-md-6 ftco-animate">
        <div class="blog-entry align-self-stretch d-flex">
            <div class="col-sm-12 col-md-12 col-lg-12 text p-4 d-block">
                <h3 class="heading mt-3"><strong>Login to the Website.</strong></h3>
                <form id="logging" name="logging" method="POST" action="<?php echo 
    $_SERVER['PHP_SELF']; ?>">
                    <div class="form-group">
                        <label> Email </label><span class="required text-danger"> *</span> <input type="email" id="email" name="email" class="form-control" placeholder="Your Email">
                    </div>
                    <div class="form-group">
                        <label> Password</label><span class="required text-danger"> *</span><input type="password" id="pw" name="pw" class="form-control" placeholder="Password">
                    </div>
                    <div><small class="text-primary"><a href="contact.php" data-toggle="modal" data- target="#modalAppointment"><span>Forget Password...</span></a> </small></div>
                    </br>
                    <div class="form-group">
                        <input type="submit" name="LogIn" id="LogIn" value="LogIn" class="btn btn-primary 
    py-3 px-5">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
php html css bootstrap-4 bootstrap-modal
2个回答
0
投票

在.blog-entry .text类中,删除width属性。

在您的style.css文件.blog-entry .text类位于 2764

.blog-entry .text {
    position: relative;
    border-top: 0;
    border-radius: 2px;
    /* width: 55%; */  --- /*remove this width */
}

enter image description here


0
投票

删除.blog-entry .text的宽度

.blog-entry .text {
    position: relative;
    border-top: 0;
    border-radius: 2px;
    width: 55%;/*Remove this Width*/
}
© www.soinside.com 2019 - 2024. All rights reserved.