添加 class 后图像没有响应

Question

正如标题所说。这是我使用这个主题的代码 http://startbootstrap.com/template-overviews/grayscale/

编辑整个代码在哪里以使其清晰：

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top">
              <!--  <i class="fa fa-play-circle"></i>  <span class="light">Start</span> Bootstrap -->
                 <img class="img-responsive" src="img/ssmk_logo.png">
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="#weather">Weather Forecast</a>
                </li>
                <li>
                    <a class="page-scroll" href="#download">Estate Agent</a>
                </li>
                <li>
                    <a class="page-scroll" href="#contact">Stocks</a>
                </li>
                 <li>
                    <a class="page-scroll" href="#about">About Us</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

Answer 1

更新

使用正确的结束标签应该可以。如您所见，如果您调整马拉多纳图像的大小，它似乎是响应式的。我建议您验证整个 HTML 并检查是否有错误。

http://jsfiddle.net/xd1p8pov/

您的 html（如我们所见）缺少一个 div 和一个导航结束标记。您是否尝试检查 .img-responsive class？默认情况下 Bootstrap 应该是 :

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

Answer 2

如果 objective 是为了让您的徽标进入 Bootstrap 导航栏，您必须以某种方式调整图像的大小。您的选择是使用 CSS 来完成它，或者制作一个较小的版本以提供给您的站点。我的解决方案使用 CSS.

调整大小

img {
  margin-top: -11px;
  height: 40px;
  width: 45px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="http://i.imgur.com/9PRm767.png" />
      </a>
    </div>
  </div>
</nav>

根据 documentation 的 Bootstrap 使用图像的导航品牌，这是您将图像添加到导航栏而不是文本以进行品牌化的方法。该文档还说您需要根据您的图像覆盖一些 CSS 。我的 CSS 在这里去掉了 navbar-header 创建的一些边距，因此图像很好并且与导航栏的其余部分齐平。如果您想使用更大的图像，则需要调整导航栏的宽度。

使用 Bootstrap 中的 img-responsive class 在这里是不合适的，因为 Bootstrap 的导航栏中各种组件的宽度只会在较小的情况下折叠随着视口变宽，它本身不会沿所有维度动态调整大小。 Bootstrap 导航栏很容易成为整个框架中最不灵活的项目，但这并不是一件坏事，因为实际上，您不应该过多地调整导航栏的大小。

添加 class 后图像没有响应

Image is not responsive with class added

twitter-bootstrap-3