html - 使页面在所有移动设备上都具有响应性
问题描述
我是 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>
解决方案
据我了解,请尝试此代码
注意:- 根据您的要求应用最大宽度
.img-responsive {
margin: auto;
width: 100%;
height: auto;
max-width: 300px;
}
推荐阅读
- javascript - 从网站打开 GoogleMaps 应用程序以在 android 上导航
- ember.js - Ember 车把 如何对车把文件进行 Ajax 或 jquery 调用?
- c# - 没有属性名称的 Http get 和 post 方法
- javascript - 使用 Javascript 的下拉列表
- php - 我想在我的克隆元素显示后重新加载/刷新页面
- python - 我将 rasterio 捆绑到可执行文件中的方式有问题
- git - 在 git 中使用 mergeequests 和 releasenotes 时经常发生冲突
- jquery - 在 IBM MobileFirst Platform 上获取位置时出错
- lisp - Lisp 中用于 minimax-alpha-beta 的 REVERSE 函数
- css - 跨项目共享css和ts