img-resposive не работает

Question

Я использую bootstrap 3 в последней версии - 3.3.4 - и, к сожалению, .img-responsive класс не работает должным образом. Я пробовал все, даже .col-md-12 вместе с .img-responsive и ничего.

HTML:

<header class="container" id="container"> 
    <div class="row"> 
    <section class="col-md-3"> 
     <a href="#"> 
      <img class="img-responsive" src="http://placehold.it/350x150" alt="..." /> 
     </a> 
    </section> 
    <section class="col-md-9"> 
     <p>something else...</p> 
    </section> 
    </div> 
</header> 

CSS:

#container { 
    height: 60px; 
    background-color: red; 
} 

Вы можете увидеть предварительный просмотр here.

@edit

Изображение над контейнером - красная часть - это причина, по вопросу, .img-responsive должен был изменить размер изображения, чтобы сделать его нужным, но это не так.

Answer 1

Удалить height: 60px;

Вам нужно всего лишь:

#container {  
    background-color: red; 
} 

изображение имеет высоту 150px, но #container имеет 60px.

Answer 2

Ваш код является идеальным. Вот моя ручка http://www.bootply.com/Dka4RjELYK. Вы проверяете ссылки и ссылки на скрипты?