Bootstrap Отзывчивый Navbar с самым левым логотипом, а затем с пунктами меню Все на Navbar

Question

Вместо того, чтобы использовать брендинг Bootstrap 3, я получаю отзывчивый навигатор, у которого есть мой логотип в крайнем левом положении навигационной панели с необходимыми параметрами меню рядом с логотип на навигационной панели.

Проблема, я не уверен, как обращаться с тем, что, поскольку я хочу, чтобы этот навигатор был отзывчивым, когда размер экрана уменьшен, чтобы сказать размер iPhone, я хочу, чтобы мое типичное меню для гамбургеров бутстрапа располагалось вправо навигационной панели и при нажатии отображает только мои пункты меню, но в то же время я хочу, чтобы мой логотип всегда сохранял самую левую позицию на моем навигаторе, независимо от того, какое разрешение экрана используется.

Я представил базовую структуру того, что у меня есть на данный момент, но не знаю, как включить мой логотип или примеры ради, теперь ссылка всегда останется на навигационной панели и всегда находится в самом левом положении.

Любая помощь (bootply) была бы высоко оценена.

Pls see: http://www.bootply.com/HcZhCxMC4s для образца, но это не идеально, как неуверенность в том, как позиционировать логотип/ссылку на пункты меню.

<nav class="navbar navbar-default" role="navigation"> 
    <ul class="my-logo"> 
     <li><a href="#">Logo Link</a></li> 
    </ul> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button>  
    </div> 
    <div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav pull-left"> 
     <li><a href="#">Menu 1</a></li> 
     <li><a href="#">Menu 2</a></li> 
    </ul> 
    </div> 
</nav> 

Answer 1

Вам просто нужно использовать ту же разметку Bootstrap Navbar ...

<nav class="navbar navbar-default" role="navigation"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    /*YOUR LOGO OR LINK HERE WITH THE CLASS NAVBAR-BRAND*/  
    <a class="navbar-brand" href="#">Logo Link</a> 

Проверьте BootplyDemo

Answer 2

вы можете добавить некоторые стили:

CSS:

@media all and (max-width: 768px) { 
.navbar-header { 
    position: absolute; 
    right: 0; 
    top:0; 
    } 
    .my-logo { 
    height: 50px;  
    padding-bottom: 0; 
    margin-bottom: 0 
    } 
    .my-logo li a { 
     line-height: 50px; 
} 

http://www.bootply.com/9KstQ2THvF#

это то, что вы после этого?

Answer 3

простейший ответ на documentation странице Bootstrap в:

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
     <img alt="Brand" src="..."> 
     </a> 
    </div> 
    </div> 
</nav>