Создание страницы адаптивной на всех мобильных устройствах - PullRequest
Новая
       14

Создание страницы адаптивной на всех мобильных устройствах

0 голосов
/ 01 марта 2019

Я новичок в 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>

1 Ответ

0 голосов
/ 01 марта 2019

Как я понял, пожалуйста, попробуйте этот код

Примечание: - Максимальная ширина применяется как ваше требование 

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