Изображение не реагирует с добавленным классом

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.

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>

Пер с documentation для Bootstrap нав клейма с использованием изображений, это как добавить изображение вместо текста панели навигации для целей брендинга. В документации также говорится, что вам нужно либо переопределить некоторые CSS в зависимости от вашего изображения. Мой CSS здесь избавляется от некоторого поля, созданного navbar-header, поэтому изображение красивое и скрытое с остальной частью навигационной панели. Если вы хотите использовать более крупное изображение, вам нужно будет использовать ширину вашего навигатора.

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

Answer 2

UPDATE

С правильными закрывающим тегами, которые должны работать. Как вы можете видеть, измените ли вы изображение Марадоны, оно кажется отзывчивым. Я предлагаю вам проверить весь HTML-код и проверить, есть ли на нем какая-то ошибка.

http://jsfiddle.net/xd1p8pov/

Ваш HTML (как мы видим) отсутствует один DIV и один замыкающий нав тегов. Вы пытались проверить класс, отвечающий требованиям .img? По умолчанию в Bootstrap должно быть:

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