2016-11-02 2 views
-1

私のシナリオはこうです:私はいくつかのテキストと画像をコンテナ内に持っています。両方とも、異なる画面サイズで正しく表示されます。ブートストラップ画像に応じてテキストを反応させる方法

ただし、デスクトップで表示したときに期待した結果に表示されません。

enter image description here

私は何を達成したいことは、スクリーンショットのようなもの(応答性)です。誰でもそのことを知っていますか?

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

答えて

1

実際に、ブートストラップは、独自でそれを行うが、ここではコードである必要があります。もちろん

、最大幅は、あなたのニーズに変更する必要があります

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

1

このコードを試してください。これは、応答すぎ

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

に働くだろう
関連する問題