Bootstrap3 Меню Burger отображается неправильно

Question

У меня проблема, когда самый простой способ описать это с изображением, см. Ниже.

Теперь я не уверен, если это делает разницу, но мой нав является своего рода вложен в джамбо, вот код.

<div class="jumbotron book-jumbo" 
style="background: url('{{ url_for('static', filename='book-banner2.jpg') }}');  background-size: cover; background-repeat: no-repeat; background-position: center center; "> 
<div class="container"> 
    <nav class="navbar navbar-inverse"> <!-- removed navbar-fixed-top --> 
     <div class="container"> 
      <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 


      <div id="navbar" class="navbar-collapse collapse"> 

       <ul class="nav navbar-nav navbar-left"> 
        <li class="navbar-left"><a class="navbar-brand" href="/"> <img style="height:40px; margin-top:-15px;" src="{{url_for('.static', filename='logo.png')}}"></a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class=""><a href="/faq/">FAQ</a></li> 
        <li class=""><a href="/book-cleaning/">Book Now</a></li> 
        <li class="phone"><a href="tel:01952 924090">01952 924090 (FREE)</a></li> 
       </ul> 

      </div><!--/.navbar-collapse --> 
     </div> 
    </nav> 
    <div class="row jumbotxt"> 
     <div class="col-md-12" style=""> 
      <h1>You're 60 seconds away from you-time o'clock.</h1> 
     </div> 
    </div> 
</div> 

Такое поведение очень странно, ничего подобного не видел. Может ли кто-нибудь указать проблему и исправить?

Спасибо.

Answer 1

Трудно видеть без вашего пользовательского css, но есть ли у вас перезапись css, которая может касаться класса значка или элемента span? Я был в состоянии повторить только после добавления

.icon-bar {display:inline-block !important;} 

С вашего изображения он выглядит как добавляется где-то в эти пролеты «инлайн-блок». Вы можете видеть, как я смог реплицироваться по адресу http://codepen.io/anon/pen/ZQVJXV

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