在移动设备上查看时，div内容会拉伸

Question

我在这里有一个响应页面，并且已将其对齐到中心。但是我希望每当我在移动窗口中打开该页面时，我都希望文本能够拉伸，并且左右两侧都不应有空格。我怎样才能做到这一点？我使用的是Bootstrap 4，在移动设备上查看页面时，我只需要去除两边的空白

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.alignLeft {
    float: left;
}

.indented{padding-left: 50pt; padding-right: 50pt;}

.col-sm-9 {
    background-color: white; 
}

img {
    padding-left: 10px;
    width: 100%;
    height: 100%;
}



h3 {
    text-align: center;
    padding-left: 20px;
}

h4, p {
    padding-left: 20px;
    padding-right: 20px;
    text-align: justify !important;
}

.para1 {
    text-align: center !important;
}


h4:first-child {
    display: inline;
    margin-left: 20px !important;
}

h4:nth-child(2) {
    text-align: left !important;
}

p:first-child { 
    text-align: center !important; 
}

p:nth-child(3) {
    text-align: left !important;
    float:  left !important;
}

.center3 {
    margin: auto;
    width: 65%;
    margin-bottom: 0;
}

.columns1 {
    align-self: center;
    justify-content: center;
    background-color: white;
    margin-bottom: 5px;
    padding-bottom: 50px;
  }

  .thumb {
    width: 100px;
    height: 100px;
    display: inline-block;
    border-radius: 50%;
    background-image: url(https://ibb.co/d7s9Fe);
    background-size: cover;
    background-position: center;
    margin-top: 60px;
    margin-left: 20px;
    float: left;
  }
.center2{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-content: center;
    margin: auto;
    width: 65%;
    margin-bottom: 0;
    
}

i.material-icons {
    font-size: 16px;
    vertical-align: middle;
    position: relative;
    font-size: 24px;
}

p {
    font-size: 17px !important;
}

.center2 .footer {
    bottom: 0;
}

.center {
    margin: 0 auto;
    width: 90%;
    padding-left: 300px;
 
}

.jumbotron {
    align-items: center;
    background-color: white; 
    overflow-x: hidden;
}


.navbar {
    align-items: center;
}

.center1 {
    margin: auto;
    width: 50%;
    padding-left: 140px;
}

.footer-copyright {
    width: 100%;
    background-color: gray;
    padding-right: 70px;
}


.footer {
    font-family: "Roboto", sans-serif;
    background-color: grey; 
    bottom: 0;
    margin : auto;
    margin-bottom: 0;
    position: relative;
    z-index: 12;
    font-size: 10px;
    display: grid;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    text-overflow: ellipsis;
}

.footer a {
    background-color: transparent;
}
a {
    color: white;
    text-align: center;
}

.container-fluid {
    background-color: white;
}

  <nav class="navbar">
    <div class="center3">
      <a class="navbar-brand mx-auto" asp-controller="Home" asp-action="Index">
        <i class="fa fa-cubes"></i> GEP
        <span class="header-logo-text">Learning Management System</span>
      </a>
    </div>
  </nav>
  <div class="jumbotron vertical-center">
    <div class="row content">
      <div class="center2">
        <div class="columns1 text-center">
 
          <div class="thumb"></div>
          <h4 align="left" style="margin-top: 100px;">
            <span style="margin-left: 20px;">School Name</span>
          </h4>
          <br>
          <br>
          <br>
          <hr>
          <section>
            <div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                </p>
            </div>
          </section>
          <br>
          <br>
          <section>
            <div>
              <img class="img-responsive" src="https://ibb.co/d7s9Fe" alt="Smiley face" style="float:right;width:400px;height:200px;">
              <p>
                <span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
                <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
              </p>
            </div>
          </section>
          <br>
          <br>
          <br>
          <br>
          <br>
          <section>
            <div>
              <img class="img-responsive" src="https://ibb.co/d7s9Fe" alt="Smiley face" style="float:left;width:400px;height:200px;">
              <p>
                <span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
                <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
              </p>
            </div>
          </section>
          <br>
          <br>
          <br>
          <br>
          <section>
            <div>
              <img class="img-responsive" src="https://ibb.co/d7s9Fe" alt="Smiley face" style="float:right;width:400px;height:200px;">
              <p>
                <span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
                <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
              </p>
            </div>
          </section>
          <br>
          <br>
          <br>
          <br>
          <section>
            <div>
              <h3><u>Address</u></h3>
              <i class="material-icons" style="color:red; ">location_on</i>
              <span id="txt1" style="font-size: 15px;">Address,County,City,District</span>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
      <div>
        <a href="">
          <h3>Gep Learning Management System</h3>
        </a>
      </div>
  </div>

Answer 1

需要使用媒体查询：

必须阅读有关media query

的信息

可以请您尝试。

@media screen and (max-width: 768px) {
  .center2{width: 100%;}
  .center2 img {
    width: 100% !important;
    float: left !important;
    height: auto !important;
    padding: 15px 0;
}
}

希望获得帮助。

让我知道进一步的澄清。

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.alignLeft {
    float: left;
}

.indented{padding-left: 50pt; padding-right: 50pt;}

.col-sm-9 {
    background-color: white; 
}

img {
    padding-left: 10px;
    width: 100%;
    height: 100%;
}



h3 {
    text-align: center;
    padding-left: 20px;
}

h4, p {
    padding-left: 20px;
    padding-right: 20px;
    text-align: justify !important;
}

.para1 {
    text-align: center !important;
}


h4:first-child {
    display: inline;
    margin-left: 20px !important;
}

h4:nth-child(2) {
    text-align: left !important;
}

p:first-child { 
    text-align: center !important; 
}

p:nth-child(3) {
    text-align: left !important;
    float:  left !important;
}

.center3 {
    margin: auto;
    width: 65%;
    margin-bottom: 0;
}

.columns1 {
    align-self: center;
    justify-content: center;
    background-color: white;
    margin-bottom: 5px;
    padding-bottom: 50px;
  }

  .thumb {
    width: 100px;
    height: 100px;
    display: inline-block;
    border-radius: 50%;
    background-image: url(https://ibb.co/d7s9Fe);
    background-size: cover;
    background-position: center;
    margin-top: 60px;
    margin-left: 20px;
    float: left;
  }
.center2{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-content: center;
    margin: auto;
    width: 65%;
    margin-bottom: 0;
    
}

i.material-icons {
    font-size: 16px;
    vertical-align: middle;
    position: relative;
    font-size: 24px;
}

p {
    font-size: 17px !important;
}

.center2 .footer {
    bottom: 0;
}

.center {
    margin: 0 auto;
    width: 90%;
    padding-left: 300px;
 
}

.jumbotron {
    align-items: center;
    background-color: white; 
    overflow-x: hidden;
}


.navbar {
    align-items: center;
}

.center1 {
    margin: auto;
    width: 50%;
    padding-left: 140px;
}

.footer-copyright {
    width: 100%;
    background-color: gray;
    padding-right: 70px;
}


.footer {
    font-family: "Roboto", sans-serif;
    background-color: grey; 
    bottom: 0;
    margin : auto;
    margin-bottom: 0;
    position: relative;
    z-index: 12;
    font-size: 10px;
    display: grid;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    text-overflow: ellipsis;
}

.footer a {
    background-color: transparent;
}
a {
    color: white;
    text-align: center;
}

.container-fluid {
    background-color: white;
}
@media screen and (max-width: 768px) {
  .center2{width: 100%;}
  .center2 img {
    width: 100% !important;
    float: left !important;
    height: auto !important;
    padding: 15px 0;
}
}

<nav class="navbar">
    <div class="center3">
      <a class="navbar-brand mx-auto" asp-controller="Home" asp-action="Index">
        <i class="fa fa-cubes"></i> GEP
        <span class="header-logo-text">Learning Management System</span>
      </a>
    </div>
  </nav>
  <div class="jumbotron vertical-center">
    <div class="row content">
      <div class="center2">
        <div class="columns1 text-center">
 
          <div class="thumb"></div>
          <h4 align="left" style="margin-top: 100px;">
            <span style="margin-left: 20px;">School Name</span>
          </h4>
          <br>
          <br>
          <br>
          <hr>
          <section>
            <div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                </p>
            </div>
          </section>
          <br>
          <br>
          <section>
            <div>
              <img class="img-responsive" src="https://ibb.co/d7s9Fe" alt="Smiley face" style="float:right;width:400px;height:200px;">
              <p>
                <span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
                <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
              </p>
            </div>
          </section>
          <br>
          <br>
          <br>
          <br>
          <br>
          <section>
            <div>
              <img class="img-responsive" src="https://ibb.co/d7s9Fe" alt="Smiley face" style="float:left;width:400px;height:200px;">
              <p>
                <span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
                <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
              </p>
            </div>
          </section>
          <br>
          <br>
          <br>
          <br>
          <section>
            <div>
              <img class="img-responsive" src="https://ibb.co/d7s9Fe" alt="Smiley face" style="float:right;width:400px;height:200px;">
              <p>
                <span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
                <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
              </p>
            </div>
          </section>
          <br>
          <br>
          <br>
          <br>
          <section>
            <div>
              <h3><u>Address</u></h3>
              <i class="material-icons" style="color:red; ">location_on</i>
              <span id="txt1" style="font-size: 15px;">Address,County,City,District</span>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
      <div>
        <a href="">
          <h3>Gep Learning Management System</h3>
        </a>
      </div>
  </div>