Предотвращение сбоя меню в 768-пиксельном отображении CSS-медиа-запроса

Я пытаюсь сделать сайт, используя twitter bootstrap. У меня есть относительно меньше меню, так что это похоже на отображение 768 пикселей. Но в бутстрапе по умолчанию меню сворачивается с использованием мультимедийных запросов. Я не могу предотвратить это поведение.

Это мой html

<div class="row">
    <div class="span3 logo"><h1><img src="img/logo.png" /></h1></div>
    <div class="span9">

        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
              <div class="nav-collapse">
                <ul class="nav nav-pills">
                  <li><a href="#">Home</a> </li>
                  <li><a href="#">Services</a> </li>
                  <li><a href="#">Portfolio</a> </li>
                  <li><a href="#">Contact Us</a> </li>
                </ul>
              </div>
            </div>
          </div>
        </div>



    </div>
    </div>

Я знаю, что это имеет какое-то отношение к медиа-запросу в бутстрапе, но не в состоянии понять.

Ответ 1

Вы хотите прочитать раздел: Использование медиа-запросов на сайте начальной загрузки: http://getbootstrap.com/2.3.2/scaffolding.html#responsive (Bootstrap 2.3.2) http://getbootstrap.com/getting-started/#disable-responsive (Bootstrap 3)

Вы захотите использовать соответствующие медиа-запросы для переопределения стилей, которые загружаются при удалении вашего видового экрана.

  // Landscape phones and down
  @media (max-width: 480px) { ... }

  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }

  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }

  // Large desktop
  @media (min-width: 1200px) { .. }

Если вы не хотите, чтобы навигационная панель сворачивалась, удалите 'collapse' из имени класса. Вероятно, вам следует избавиться:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

Короче говоря, просмотрите документы, там раздел, посвященный этой точной вещи под названием "Необычные отзывчивые вариации" здесь: http://getbootstrap.com/2.3.2/components.html#navbar (Bootstrap 2.3.2)

Ответ 2

Вы можете настроить Twitter Bootstrap css скомпилировать его из sss-twitter-bootstrap scss файлов и установить $navbarCollapseWidth в _variables.scss на нужное значение...

Edit

Как указано в комментариях к @Accipheran, для Bootstrap 3.x имя переменной, которую вы должны установить, это $grid-float-breakpoint.

Ответ 3

Это сработало для меня:

.nav-collapse, .nav-collapse.collapse {
    overflow: visible;
}   
.navbar .btn-navbar {
    display: none;
}

Ответ 4

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

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

Ответ 5

найти переменную:

@сетки-поплавок-точка останова

который установлен на @screen-sm, вы можете изменить его в соответствии с вашими потребностями.

Если вы переопределите файл поставщика меньше, установите переменную в 0px, например:

@grid-float-breakpoint: 0px;

Ответ 6

Если все, что вы хотите сделать, - это не крах Nav, пока он не достигнет меньшего значения. Самый простой способ - перейти на страницу настройки Twitter Bootstrap, измените значение @navbarCollapseWidth на нужное значение и загрузите пакет. Готово.

Если вы хотите настроить вне того, что разрешено этой страницей, вам придется переопределить или настроить, как описано в других ответах.

Ответ 7

Этот пример с официального сайта: http://getbootstrap.com/examples/non-responsive/

Изменения находятся в non-responsive.css, но важными частями, относящимися к .navbar, являются:

body {
    padding-top: 70px;
    padding-bottom: 30px;
}
.page-header {
    margin-bottom: 30px;
}
.page-header .lead {
    margin-bottom: 10px;
}
.navbar-collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left;
    margin: 0;
}
.navbar-nav > li {
    float: left;
}

Ответ 8

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

@grid-float-breakpoint: 0px;

Ответ 9

Вот что я использовал для бутстрапа 3.3.4. Это взломать, но это также не двухдневное исправление, переделывающее css.

@media (min-width: 768px) and (max-width: 979px) {
  .navbar-header {
    width: 100% !important;
  }
  .navbar-toggle {
    display: inline-block !important;
    float: right !important;
  }
}

Вам может потребоваться настроить селектор, но в основном сделать заголовок полной шириной, а затем показать и поплавать кнопкой вправо.