twitter-bootstrap - 网页没有响应
问题描述
我想让我的网页响应。它可以工作到 320 像素,但是当我进一步减小屏幕尺寸时,它根本不起作用,只有一半的内容可见。
这是所需的代码
HTML:
<div class="container">
<div class="row">
<div class="col-md-6">
<img
src="assets/img/profile.png"
height="520"
width="500"
hspace="20"
class="responsive"
/>
</div>
<div class="col-md-6">
<p>
Lorem Khaled Ipsum is a major key to success. To succeed you must
believe. When you believe, you will succeed. Mogul talk. Find peace,
life is like a water fall, you’ve gotta flow. Lion! Fan luv. Eliptical
talk.
</p>
</div>
</div>
</div>
CSS:
.responsive {
max-width: 100%;
display: block;
height: auto;
margin: auto;
}
img {
float: left;
margin-left: 20px;
}
@media screen and (max-width: 768px) {
.nav-menu {
background-color: #ffffff;
}
.nav-toggle:hover {
background-color: transparent;
}
.nav-toggle span {
background-color: #dfdfdf;
}
.nav-toggle span:hover {
background-color: #fff;
}
}
提前致谢!
解决方案
这是我所做的:
我删除了img
and.responsive
样式并使用了 Bootstrap.img-fluid
类(在此处查看):
/* Deleted, because it isn't relevant anymore. */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://via.placeholder.com/1150" class="img-fluid" />
</div>
<div class="col-md-6">
<p>
Lorem Khaled Ipsum is a major key to success. To succeed you must believe. When you believe, you will succeed. Mogul talk. Find peace, life is like a water fall, you’ve gotta flow. Lion! Fan luv. Eliptical talk.
</p>
</div>
</div>
</div>
</body>
</html>
我在我的电脑上试了一下。图像宽 1150 像素,但视口只有 300 像素宽。图像完美适应:
希望能帮助到你。
推荐阅读
- user-interface - volume_up 和 volume_down 图标之间的转换
- conda - 可用于 conda 的 shebang 线是什么样的?
- firebase - Flutter Firestore 使用特定键写入数据
- windows - 完全理解 .exe 文件是如何执行的
- django - Django中的嵌套循环
- java - 使用 printStackTrace 包含外部库的日志
- c# - 为什么我的代码不会删除 XML 文件中的特定元素
- python - 我想在上下文中反转这些项目
- excel - 将文档从 Excel 打印到 Word 时出现错误处理程序问题
- javascript - 从派生(ES2019 私有类)访问基类的受保护字段