Как я могу запретить загрузчику Twitter свернуть верхние выпадающие меню навигации при ширине браузера менее 960 пикселей в ширину?

Question

Я пытался поиграть с различными минимальными / максимальными значениями высоты и ширины класса в CSS и, похоже, не может помешать верхней навигационной панели свернуть мои выпадающие меню.Я бы предпочел фиксированную ширину, но полноэкранное меню зафиксировано сверху.Раскрывающиеся списки работают нормально, но когда я уменьшаю ширину окна браузера, он падает.Я убрал тумблер, но никакой любви из начальной загрузки.Вот код из начальной загрузки 2.0:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="brand" href="./index.html">Brand Name&nbsp;</a>
        <ul class="nav">
           <form class="navbar-search">
             <input type="text" class="search-query" placeholder="Search Active Page...">
           </form>
        </ul>

       <ul class="nav pull-right">
               <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-user icon-white"></i>&nbsp;Pages<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">My Pages</a></li>
                    <li><a href="#">New Page</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Share Your Pages</a></li>
                    <li><a href="#">Page Browswer</a></li>
                  </ul>
              </li> 

               <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-cog icon-white"></i>&nbsp;Settings<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Upload Images</a></li>
                    <li><a href="#">Upload Files</a></li>
                    <li><a href="#">Link Other Accounts</a></li>
                     <li><a href="#">Manage Labels</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Privacy Settings</a></li>
                    <li><a href="#">Help</a></li>
                 </ul>
              </li> 
           <li>&nbsp;&nbsp;<img src="img/small_fb_pic.jpg" vspace="5px"></li>
           <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               John<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Logout</a></li>
                <li class="divider"></li>
                <li><a href="#">Help</a></li>
              </ul>
          </li>      


        </ul>  <!-- end left justified menu items -->


    </div>
  </div>
</div>

Answer 1

Определения ширины для макета флюида содержатся в css/bootstrap-responsive.css. Вы можете изменить диапазоны, при которых начальная загрузка свернет меню, просто изменив значения min-width и max-width в определениях @media.

Например, чтобы сворачивать панель навигации в окне меньше 800px, замените относящиеся к панели навигации @media объявления, содержащие max-width: 980px, на max-width: 800px. Сделайте то же самое для min-width. На момент написания статьи эти изменения произошли в строках 105, 281 и 381, так что каждая строка изменилась и выглядела следующим образом (сейчас они, вероятно, отличаются):

105: @media (min-width: 768px) and (max-width: 800px) { ... }

281: @media (max-width: 800px) { ... }

381: @media (min-width: 800px) { ... }

Answer 2

Чтобы найти 3 очень полезных решения, перейдите по этой ссылке: http://taylor.fausak.me/2012/03/15/dropdown-menu-in-twitter-bootstraps-collapsed-navbar/

В итоге я выбрал вариант 1 в его списке ... Основная суть заключается в том, чтобы отредактировать ваш файл Responsive.less или Responsive.css, если вы нене имеет доступа к источнику .less, как таковому:

Add:: not ([data-no-collapse = "true"])

Везде определены следующие стили классов..navbar .dropdown-menu

(я нашел 7 мест в файле responseive.less)

Затем, когда вы определите свой HTML, вы захотите добавить атрибут как:

<div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        <i class="icon-user"></i>
        {{ account.FirstName}} {{ account.LastName }}&nbsp;
        <b class="caret"></b>
    </a>

    <ul class="dropdown-menu" data-no-collapse="true">
        <li><a href="/logout.cshtml">Logout</a></li>
    </ul>
</div>

Обратите внимание на атрибут data-no-collapse в неупорядоченном списке.

РЕДАКТИРОВАТЬ: теперь ваш раскрывающийся список не будет расширяться ...

Answer 3

Полагаю, вы говорите о Bootstrap версии 2. Возможно, кто-то ищет ответ для Bootstrap 3.Этот ответ для вас!

1. Перейти на Страница настройки начальной загрузки
2. переопределить значение @ grid-float-breakpoint для чего-то жестко заданного (например, 520px) или дляэкран меньшего размера, например @ screen-xs-min
3. Нажмите кнопку внизу страницы, чтобы перекомпилировать файлы css
4. , замените файлы bootstrap.css и bootstrap-min.css нате из загруженного почтового файла.

Answer 4

Это для адаптивного дизайна на веб-сайтах, которые могут адаптироваться к размеру экрана (особенно на мобильных устройствах). Узнайте больше здесь:

http://twitter.github.com/bootstrap/scaffolding.html#responsive

Чтобы исправить это в своем решении начальной загрузки, перейдите на страницу настройки начальной загрузки, снимите флажок «Адаптивные макеты» и повторно загрузите файлы начальной загрузки.

http://twitter.github.com/bootstrap/download.html

Это лучше, чем редактировать файлы начальной загрузки вручную, imo. Надеюсь, это поможет.

Answer 5

1. Перейти в файл bootstrap-responseive.css
2. Перейти к номеру строки 952
3. Измените ширину на ширину, на которую вы хотите сворачивать навигационную панель

Answer 6

Удалите ссылку на таблицу стилей в bootstrap-responseive.css из вашего HTML, и ничто больше не рухнет.