Twitter Bootstrap 3 navbar collapse

Я пытаюсь перенести мой Twitter Bootstrap 2 navbar в Bootstrap 3. У меня есть 3 части на моем навигаторе.Twitter Bootstrap 3 navbar collapse

«myContent1» и «myContent2» всегда будут видны. «myContent3» будет свернут для небольших экранов. Но когда я нажимаю кнопку сложенного на маленьком экранном устройстве, свернутое меню не открывается. Ничего не происходит, когда я нажимаю кнопку.

Я положил его в скрипкой: http://jsfiddle.net/mavent/LDP8K/6/

<nav class="navbar navbar-inverse navbar-fixed-top navbar-sam-main" role="navigation"> 
<!-- Brand and toggle get grouped for better mobile display --> 
<div class="navbar-header"> 

    <a class="navbar-brand navbar-left" href="" title="aaaa" id="MyContent1"> 
     MySite 
    </a> 

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-mycol"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 



    <ul class="nav navbar-nav navbar-left" id="myContent2"> 
     <li class="dropdown" id="users"> 
      <a class="navbar-brand" href="" title="aaa" style="display:inline-block;padding-right:0px;"> 
       <img src="" width="24" height="24" alt="aaaa"> 
       MyName 
      </a> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#users" style="display:inline-block;padding-left:0px;"> 
       <b class="caret" style="border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #999;"></b> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href=""><img src="" width="24" height="30"/> OtherName</a></li> 
       <li class="divider"></li> 
       <li><a href="">AAAA</a></li> 
       <li><a href="">BBB</a></li> 
      </ul> 
     </li> 
    </ul> 


</div> 


<!-- Collect the nav links, forms, and other content for toggling --> 
<div class="collapse navbar-collapse navbar-mycol"> 
    <ul class="nav navbar-nav navbar-right" id="myContent3"> 

     <li><a href="">UUUU</a></li> 
     <li><a href="">YYYYY</a></li> 

     <li class="dropdown" id="wer"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#wer">Tools 
       <b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="">aaaa</a></li> 
       <li><a href="">bbbb</a></li> 
       <li><a href="">cccc</a></li> 
      </ul> 
     </li> 

    </ul> 

</div><!-- /.navbar-collapse --> 
</nav>

Edit: С предложением одного человека я ставлю «кнопку переключения», из секции navbar-header. И я нажал кнопку top:0 and right:0 абсолютного стиля на кнопку. Но в этом случае, если экран очень маленький, myContent2 проникает в кнопку. Вы можете видеть, что поведение от этого: http://jsfiddle.net/mavent/paXt9/2/

edit2: Мне нужно это поведение:

Для больших экранов, Everthing видна.
enter image description here

Для небольших экранов, myContent2 видно, myContent3 свернут. myContent3 не обваливается, если кнопка нажата.
enter image description here

Для очень маленьких экранов myContent2 будет отображаться на следующей строке. Таким образом, myContent2 и кнопка не будут конфликтовать друг с другом.
enter image description here

источник

2013-09-13 trante

Попробуйте переместить закрывающий тег header' NavBar-'только после того, как кнопка переключения: http://jsfiddle.net/koala_dev/LDP8K/8/ –

@ koala_dev В этом случае myContent2 отображается нормально. Но myContent2 завернут на следующую строку после кнопки переключения. Я хочу, чтобы myContent2 находился между Брендом и кнопкой.Я не хочу брать еще одну строку с экрана. Fiddle: http://jsfiddle.net/mavent/M6XqB/1/ – trante

Затем вы можете установить, что z-индекс кнопки появится поверх myContent2: http://jsfiddle.net/koala_dev/LDP8K/ 9/ –

Раскрывающийся элемент занимает всю ширину NavBar и мешает кнопку работать, чтобы исправить вещи, которые вы можете установить более высокий Z-индекс для вашей ссылки марки и кнопка Navbar рычажков:

.navbar-sam-main .navbar-toggle, .navbar-sam-main .navbar-brand { 
    position: relative; 
    z-index:1; 
}

Для других проблем, которые были затронуты в разделе комментариев, исправления заключались в том, чтобы обернуть ссылку выпадающего меню и каретку в промежутке, чтобы заставить их обернуть как один элемент и использовать медиа-запрос для отображения ссылки в центре когда она падает на вторую линию:

HTML

<li class="dropdown" id="users"> 
    <span> 
     <a class="navbar-link" href="" title="aaa" style="display:inline-block;padding-right:0px;"> 
      <img src="" width="24" height="24" alt="aaaa" /> 
      MyName 
     </a> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#users" style="display:inline-block;padding-left:0px;"> 
      <b class="caret" style="border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #999;"></b> 
     </a> 
    </span> 
    <ul class="dropdown-menu"> 
     ... 
    </ul> 
</li>

CSS

.navbar-sam-main .navbar-nav > li >span { 
    display: inline-block; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    line-height: 20px; 
} 
.navbar-sam-main .navbar-nav > li >span .navbar-brand { 
    padding-top: 0; 
    padding-bottom: 0; 
} 

@media (max-width: 270px) { 
    #myContent1 > li.dropdown { 
     text-align: center; 
    } 
    #myContent1 > li.dropdown >ul { 
     text-align:left; 
    } 
}

источник

2013-10-07 07:20:10

Это прекрасный ответ. Спасибо, что спасли мои часы. – trante

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

.hidden-sm 
.visible-lg

Дополнительная информация: http://getbootstrap.com/css/#responsive-utilities

Try не для переопределения механизмов компоновки, снабженных Bootstrap и создать ваш макет в первом состоянии изначально, а затем переопределить видимость с классами, о которых я упоминал.

источник

2013-09-19 11:12:03

Twitter Bootstrap 3 navbar collapse

ответ

Смежные вопросы