添加类时，图像没有响应。
添加类时，图像没有响应。
提问于 2015-02-13 14:28:08
就像标题上说的。下面是我使用这个主题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>回答 2
Stack Overflow用户
回答已采纳
发布于 2015-02-13 16:25:35
如果你的目标是让你的标志进入引导导航栏，你将不得不调整图像的某种方式。你的选择是用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>
根据引导导航的文档使用图像，这是如何添加图像到您的导航栏，而不是文字品牌的目的。文档还说，您需要根据图像覆盖一些CSS。这里我的CSS去掉了navbar-header创建的一些空白，所以图像很好，并且与导航条的其余部分都是齐平的。如果您想要使用更大的图像，您将需要混乱的宽度，您的肚脐。
在这里使用Bootstrap中的img-responsive类是不合适的，因为Bootstrap的导航条中的各种组件的宽度，它只在较小的视图中折叠，而本身并不随着视图端口的变宽而沿所有维度动态调整大小。引导导航栏很容易成为整个框架中最不灵活的项目，但这并不是件坏事，因为实际上，您不应该过多地影响导航条的大小。
Stack Overflow用户
发布于 2015-02-13 14:33:22
更新
使用正确的结束标记，这应该是有效的。正如你所看到的，如果你调整马拉多纳图像的大小，它似乎是有反应的。我建议您验证整个HTML，并检查其中是否有错误。
http://jsfiddle.net/xd1p8pov/
您的html (如我们所见)缺少一个div和一个导航关闭标记。你试过检查..img响应类吗？默认情况下，在Bootstrap中应该是：
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28501778
复制相关文章
相似问题
腾讯云开发者
