我的场景是这样的:容器中有一些文本和图像。它们都可以在不同的屏幕尺寸下正确显示。
但是，当我在 Desktop 中查看它时，它并没有显示出我预期的结果。
我想要实现的是类似于屏幕截图(响应式)的东西。有人知道怎么做吗？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
p.solid {border-style: solid;}
</style>
<body>
<div class="container">
<p class="solid">A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.</p>
<p align="center"><img class="img-responsive" src="img/20161014_220509_073.jpg" /> </p>
</div>
</body>
</html>
最佳答案
实际上，bootstrap 应该自己做，但这里是代码:
当然，max-width应该根据自己的需要改
.container{
width:100%;
max-width:500px;
}
.container img{
max-width:100%;
height:auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
p.solid {border-style: solid;}
</style>
<body>
<div class="container">
<p class="solid">A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.A solid border.</p>
<p align="center"><img class="img-responsive" src="img/20161014_220509_073.jpg" /> </p>
</div>
</body>
</html>关于twitter-bootstrap - Bootstrap 如何根据图像使文本响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40375015/