Bootstrap 3'img-respond'類反應不太靈敏

Question

更新：這是最新的jsFiddle 。

---

您可能需要調整“ 結果”窗格的大小，甚至將其拆分到自己的窗口中，以查看其所有功能。

如您所見，我有一個試圖響應的400x200徽標圖像（通過.img-responsive類），但是它繼續保持相同的大小（400x200），並且沒有調整大小+很好地嵌套到我的標題導航欄中。

理想情況下，圖像應根據菜單項（ MUCH AMAZE ， SUCH 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>

我不太確定“ Toggle navigation ” <button/>在做什么（我的徽標<img/>之前的那個）。 誠然，我在這里進行貨物培訓，只是從示例站點獲得了一些通用的Bootstrap 3代碼。 我是否使用了錯誤的樣式規則？ 我需要在此處將<img/>放在表格或div或其他某種類型的容器中嗎？ 我要去哪里呢？

Answer 1

添加此內容可能對您有幫助

.img-responsive
{
width:100%;
}