Question

我是Bootstrap 4的新手，我想创建一个页面，该页面在所有移动设备上都应该完全响应。我不知道如何使其完全响应，就像我在更改图像的宽度一样，它开始水平滚动，这是我不想要的。我已经编写了一个简单的代码，但是我不知道为什么它不能在移动设备上正常运行。

.img-responsive{
    margin:auto;
    width:100px;
    height:100px;
}

.bg-success
{
    margin-top:2%;
}
.bg-warning,.bg-danger
{
    margin-top:.3%;
}
.bg-danger
{
    margin-top:.3%;
}
p{
    text-align: center;
    font-size:20px;
    margin-top:5%;
    margin-bottom:5%;
   
}
.soc .bg-success{
    background-color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
     <title>Bootstrap 4 Website Example</title>
      <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <link rel="stylesheet" href="custom_1.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<!--BODY-->
<body>
<!--Section1-->
 
  <div class="container">
    <div class="row bg-success">
      <div class=" col-xs-12 col-sm-12 col-md-9 col-lg-12">
        <img class="img-responsive" src="https://images.unsplash.com/photo-1490644120458-f5e5c71d2ab0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
      </div>
    </div>
    
<!--Section2-->    
  <div class="row bg-danger">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <p>Please Leave Feedback For<br>"BRAND"
         </p>
     </div>
 </div>
    
<!--Section3-->  
  <div class="row bg-danger">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <p>Would You Recommend Us To Others?
        </p>
      </div>
  </div>

  <!--Button Section-->
  <div class="row bg-success soc">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <button class="btn btn-primary btn-block btn-lg">Yes, I would</button>
          <button class="btn btn-primary btn-block btn-lg">No, Thankyou</button>
        
      </div>
  </div>
  </div>
 </body>
 </html>

Answer 1

据我了解，请尝试使用此代码

注意：-根据您的要求使用最大宽度

    .img-responsive {
        margin: auto;
        width: 100%;
        height: auto;
        max-width: 300px;
      }

使页面在所有移动设备上都能响应

1 个答案: