Question

我的场景是这样的：我在Container中有一些文本和图像。它们都可以正确显示不同的屏幕尺寸。

但是，当我在桌面中查看它时，它不会显示到我的预期结果。

我想要实现的是截图（响应）。有人知道怎么做吗？

<!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>

Answer 1

实际上，bootstrap应该由它自己完成，但这里是代码：

当然，最大宽度应根据您的需要进行更改

＆＃13;

.container{
    width:100%;
    max-width:500px;
  }
.container img{
    max-width:100%;
    height:auto;
  }

＆＃13;

<!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>

＆＃13;

Answer 2

试试这段代码。这也适用于响应

＆＃13;

.solid, .img-responsive {
  margin: 0 auto;
  display:table;
  }

＆＃13;

<!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>

＆＃13;

Bootstrap如何根据图像使文本响应

2 个答案: