Bootstrap - отзывчивый логотип, меню и навигатор

Question

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

При просмотре на мобильном устройстве меню превращается в выпадающее меню и перемещается под большим логотипом.

На сайте я хотел бы использовать в качестве эталона является http://www.fidelityhome.net

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

<div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="large-4 columns centered-text-responsive"> <div class="logo-container"><a href="index.html"><img src="images/logo3.png" alt="logo" 
        style="max-width:600px; max-height:200px; width:100%;" /></a> 
      </div> 

Answer 1

Try на вас логотип

<img src="logo.png" class="image-responsive"> 

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

Answer 2

Я думаю, что это то, что вы хотите.

<a class="large-4 columns centered-text-responsive"> <div class="logo-container"><a href="index.html"><img src="http://www.fidelityhome.net/wp-content/uploads/Fidelity-Home-Energy-Logo.png" alt="logo" style="max-width:600px; max-height:200px; width:100%;" /></a> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

Попробуй здесь: http://www.bootply.com/Yl1U4fPfb9

Answer 3

ваш HTML структура должна быть такой,

<div class="navbar navbar-default navbar-fixed-top"> 
      <div class="container"> 
       <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> 
        <a class="navbar-brand" href="#" class="logo"><img src="assets/logo.png" alt=""></a> 
       </div> 
       <div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav pull-right"> 
        <li class=""><a href="#">1</a></li> 
        <li><a href="#">Menu</a></li> 
       </ul> 
     </div> 
    </div> 
</div> 

Я надеюсь, что это поможет.