2015-01-17 3 views
0

My Bootstrap ссылки на навигацию, включая поиск, уходят, когда я изменяю размер страницы в любом месте размером менее 600 пикселей. Что послужило бы причиной этого? Только логотип не перемещается. Навигатор в порядке и не изменяет размер, поэтому я был удивлен, что ссылки исчезли, когда страница изменилась. Я не хочу, чтобы ни одна из моих ссылок не перемещалась с места, где они находятся вне зависимости от изменения размера страницы.twitter Bootstrap navbar links перемещается при изменении страницы

код здесь: HTML

http://jsfiddle.net/Crisp3333/2u0tgh5r/

<div class="menubar"> 
<nav role="navigation" class="navbar navbar-default"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand"><img src="yancii_logo.jpg" width="40px" height="50px"></a> 
    </div> 
    <!-- Collection of nav links, forms, and other content for toggling --> 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
    <form role="search" class="navbar-form navbar-left"> 
      <div class="form-group"> 
       <input type="text" placeholder="Search events, places, contacts......" class="form-control"> 
      </div> 
     </form> 
     <ul class="nav navbar-nav"> 

      <li><a href="#">CreateEvent</a></li> 
      <li><a href="#">MyEvents</a></li> 
      <li><a href="#">Contacts</a></li> 
      <li class="dropdown"> 
       <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a> 
       <ul role="menu" class="dropdown-menu"> 
        <li><a href="#">Inbox</a></li> 
        <li><a href="#">Drafts</a></li> 
        <li><a href="#">Sent Items</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Trash</a></li> 
       </ul> 
      </li> 
     </ul> 

     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Account</a></li> 
     </ul> 
    </div> 
</nav> 

+0

предоставил демо-код, чтобы понять проблему. Вы можете использовать [JSFIDDLE] (http://jsfiddle.net/) – tejashsoni111

+0

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

+1

Bootstraps navbar сворачивается на экранах размером меньше 768 пикселей, см. Http://getbootstrap.com/components/#navbar. Я думаю, что это может быть ваша проблема – ckuijjer

ответ

1

Проблема заключается в этот кусок кода: /* min-width: 1400px; */ И вы можете найти его в class -> .navbar

Это в основном вызывает ваше раскрывающееся меню не будет отображаться. И кнопки меню не изменяются так, как вы хотите.

Надеюсь, это поможет вам! Cheers

+1

, это правильно, проблема вызвана этой минимальной шириной – Devin