Html 自举3'；img响应性'；班级反应不是很积极

更新：这里是最新的更新

---

您可能需要调整结果窗格的大小，或者甚至将其拆分到自己的窗口中，以便看到它的全部光彩

如您所见，我有一个400x200徽标图像，我试图使其具有响应性（通过

.img responsive

类），但是它仍然保持相同的大小（400x200），并且没有调整大小并很好地嵌套到标题导航栏中

理想情况下，图像应调整大小并适合导航栏内的菜单项（

非常惊奇

，

如WOW

，等等）

我觉得这与这部分有关：

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/"><img src="http://placehold.it/400x200" class="img-responsive" height="220" /></a>
</div>

切换导航

我真的不确定这个“切换导航”

在做什么（就在我的徽标

之前）。诚然，我在这里学习，刚刚从他们的示例网站上获得了一些通用的Bootstrap3代码。我是否应用了错误的样式规则？我是否需要将

放入表单、div或其他类型的容器中？我哪里出错了？

添加此选项可能会对您有所帮助

.img-responsive
{
width:100%;
}

---

图像是有响应的。如果您想将图像放入

.navbar brand

中，可以从

.navbar brand

（

height:auto

）中删除高度。谢谢@alirezasafian（+1）-请查看我更新的JSFIDLE。现在，图像显示在导航栏中，但没有调整大小以适合其内部。想法？谢谢@Anubhav（+1）-我如何在

标记中添加该规则？通过添加.img responsive{width:100%；}使用内联as或外部引导样式表