Question

我创建了一个包含图片标题的示例页面。但该页面没有响应。我将课程img-responsive添加到img标记，但它没有响应。这是代码：

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

Answer 1

如上所述删除img tag height =“100”并将其添加到style.css

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

对于没有响应的图像，请确保使用.img-responsive的引导样式

在firebug / developer工具中，你应该看到一个

类

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

至于解决你的问题，我很乐意解决它，如果你能为我做一个代码/代码示例/

Answer 2

你应该这样做，甚至不需要使用自定义类来设置样式，提供足够的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>

Twitter Bootstrap 3页面没有响应

2 个答案: