Bootstrap Logo Не Место В Navbar

Question

У меня есть тестовый сайт на http://pawfamily.tk/~shivampaw/primahc.com/

логотип не является примерка независимо от того, что я делаю. Я много лет оглядывался. Попробовал сменить отступы на 0, margin на 0, изменил размер, но тогда он не подходит для моего iPhone.

Я хочу, чтобы логотип был слева, и, очевидно, я не хочу, чтобы он был крошечным. Я также хочу это налево на мобильном телефоне.

Как я могу достичь этого?

Это мой Navbar код:

<nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 

      <a class="navbar-brand" href="#"> 
        <img class="img-responsive" style="" src="images/logo.png" alt="Prima Healthcare"> 
      </a> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header page-scroll"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li <?php echo $home; ?>> 
         <a href="index.php">Home</a> 
        </li> 
        <li <?php echo $b2b; ?>> 
         <a href="b2b.php">Business to Business</a> 
        </li> 
        <li <?php echo $contact; ?>> 
         <a href="contact.php">Contact</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container-fluid --> 
    </nav> 

Спасибо!

Answer 1

Похоже, что свойство .navbar-brand не работает с негабаритными изображениями. Мне удалось достичь цели, просто удалив .navbar-brand свойства и добавление .pull-left свойства изображения, чтобы сделать дисплей инлайн с содержанием на праве, как так:

<a href="#"> 
    <img class="img-responsive pull-left" src="images/logo.png" alt="Prima Healthcare"> 
</a> 

Если вы не планируете сделать изображение clickable, я бы даже зашел так далеко, чтобы полностью удалить привязку.

Answer 2

Я бы отказался от бренда .navbar. Вы можете использовать медиа-запросы для определения разных значений ширины для разных размеров экрана.

Изображение будет размером 200 пикселей для небольших экранов и будет масштабироваться до 250 пикселей для больших экранов. Вы можете изменить числа.

.navbar-brand { 
    padding: 0; 
} 

.navbar-brand img { 
    width: 200px; 
} 

@media only screen and (min-width : 768px) { 
    .navbar-brand img { 
     width: 250px; 
    } 
} 

Fiddle здесь: https://jsfiddle.net/DTcHh/16983/