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

Я пробовал играть с различными классами min/max высот и ширины в 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>

Ответы

Ответ 1

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

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

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

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

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

Ответ 2

Определения ширины для макета жидкости содержатся в 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) { ... }

Ответ 3

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

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

Добавить: : Нет ([данных нет коллапса = "истина" ])

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

(я нашел 7 мест в файле responsive.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 в неупорядоченном списке.

EDIT: Теперь ваше раскрывающееся меню не будет расширяться...

Ответ 4

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

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

Ответ 5

Перейдите в файл bootstrap-responsive.css
Перейти к строке 952
Измените ширину на ширину, в которой вы хотите свернуть панель навигации.

Ответ 6

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