手机屏幕上的 Bootstrap 内容未全屏

Question

In this Form content not stretch into full screen in the Mobile phone screen but in the computer and Tab screen its show properly. pls advice to solve.

 <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>

Answer 1

In .blog-entry .text class remove width property.

In your style.css file .blog-entry .text class is located at line no. 2764

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

Answer 2

Remove width on .blog-entry .text

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

OR

Remove this class text

<div class="col-sm-12 col-md-12 text p-4 d-block"> 

to

<div class="col-sm-12 col-md-12 p-4 d-block">