Bootstrap如何根據圖像使文本響應

-1

我的場景如下所示：Container中有一些文本和圖像。它們都以不同的屏幕尺寸正確顯示。Bootstrap如何根據圖像使文本響應

但是，當我在桌面上查看它時，它不會顯示到我的預期結果。

我想實現的是類似截圖（響應）的東西。任何人都知道如何做到這一點？

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

來源

2016-11-02 gosulove

實際，引導應該做的，通過自己的，但這裏是代碼：

當然

，最大寬度應改爲你的需求

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

來源

2016-11-02 08:09:57 FalcoB

試試看看這個代碼。這將在響應太

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

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

工作

來源

2016-11-02 08:12:07

Bootstrap如何根據圖像使文本響應

回答

相關問題