Twitter Boostrap 3頁無響應

-1

我創建了一個帶有包含圖像的標題的示例頁面。但該頁面沒有響應。我將類img-responsive添加到img標籤，但它不響應。下面是代碼：Twitter Boostrap 3頁無響應

<!DOCTYPE html> 
<html> 
    <head> 
     <title>A Sample Bootstrap Page</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
     <link href="css/style.css" rel="stylesheet"> 
     <script src="http://code.jquery.com/jquery.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="page-header" id="header"> 
       <img id="logo" src="img/logo.png" height="100" alt="Image" class="img-responsive"> 
       <p>Some text here</p> 
      </div> 
     </div> 
    </body> 
</html>

的style.css中包括下列各項：

#header #logo 
{ 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
}

來源

2015-04-12 Java Enthusiast

你是用硬編碼高度IMG高度= 「100」，刪除下手。 –

'style.css'是否包含'.page-header'的任何樣式？ – Last1Here

@ Last1Here style.css只包含#header #logo定義 –

卸下img標籤高度= 「100」如上述提出並添加到您的style.css

#header #logo { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    height: 100px; 
}

對於圖像不響應，確保引導樣式.IMG響應正在使用

螢火/開發工具，你應該看到一個類的

.img responsive { 
    max-width: 100%; 
    height: auto; 
    display: block; 
}

至於解決您的問題，我會很高興來解決它，如果你可以做一個codepen /片斷例子給我看看/看

來源

2015-04-12 13:39:34

你應該這樣做，即使不需要使用自定義類風格，bootstrap提供了足夠的。

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-12"> 
     <img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive"> 
     </div> 
    </div> 
    </div>

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="//code.jquery.com/jquery.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2015-04-12 13:58:33

我只是推薦使用「容器」類作爲Java Enthusiast做的「容器流體」類的寬度：100％不像「容器」。 – TeeJay

你能澄清你的答案，這種方法是不同的，爲什麼它更好？沒有評論的僅有代碼的答案很少有用。 – Mast

Twitter Boostrap 3頁無響應

回答

相關問題