Изображение бренда, сидящего за пределами navbar

Question

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#"> 
 
     <img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 1

Вы можете использовать Flexbox на .navbar-brand и уменьшить padding немного

.navbar-default .navbar-brand { 
 
    display: flex; 
 
    align-items: center; 
 
    padding: 5px; 
 
} 
 
.navbar-brand img { 
 
    height: 100%; 
 
    margin-right: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#"><img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 2

Почему бы не использовать media объект час прежде чем?

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <div class="media"> 
     <div class="media-left media-middle"> 
      <a href="#"> 
      <img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px"> 
      </a> 
     </div> 
     <div class="media-body media-middle"> 
      <h4 class="media-heading">Luckycharm-boy</h4> 
     </div> 
     </div> 
    </div> 
    </div> 
</nav> 

Answer 3

Другой путь, который я предпочитаю - создать целое «строку» DIV в полной навигационной панели без нав-заголовок, то вы можете полностью контролировать позиционирование IMG и расположение текста в различных размерах экрана для мобильных устройств, как а также большие экраны. Затем вы можете указать различные столбцы (столбцы) и записать в них. Я говорю это, так как это поможет вам разместить его в любом месте

Answer 4

Простое исправление будет использовать span. Проверь это. DEMO здесь.

HTML:

<nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <a class="navbar-logo" href="#"> 
      <span><img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px"/></span> 
      luckycharm-boy 
     </a> 
    </div> 
</nav> 

CSS:

a.navbar-logo { 
    color: #666666; 
} 

Answer 5

У меня есть решение без прогибается. Вам просто нужно настроить некоторые атрибуты для .navbar-brand и .navbar-brand>img.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
.navbar-brand { 
 
height: auto; 
 
} 
 
.navbar-brand>img { 
 
    display: inline-block; 
 
    padding-right: 10px; 
 
}

<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#"> 
 
     <img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a> 
 
    </div> 
 
    </div> 
 
</nav>