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

如果目标是将徽标放入Bootstrap导航栏，则必须以某种方式调整图像大小。您可以选择使用CSS，或者将较小版本的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>

根据使用图片的Bootstrap导航品牌的documentation，您可以将图像添加到导航栏而不是文本以用于品牌展示。文档还说你需要根据你的图像覆盖一些CSS。我的CSS在这里摆脱了navbar-header创建的一些边距，因此图像很好并且与导航栏的其余部分齐平。如果您想要使用更大的图像，则需要弄乱导航栏的宽度。

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

Answer 2

<强>更新

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

http://jsfiddle.net/xd1p8pov/

你的html（我们看到它）缺少一个div和一个nav关闭标签。您是否尝试过检查.img响应类？默认情况下，Bootstrap应该是：

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

图像对添加的类没有响应

2 个答案: