Предотвращение сворачивания меню в 768px display CSS media query

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

The menu when not collapsed

Then menu collapses ones width less than 768px

Это мой 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>

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

25
css media-queries responsive-design twitter-bootstrap

9 ответов

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

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

  // 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) { .. }

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

<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)

15

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

редактировать

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

32

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

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

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

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

находим переменную:

@grid-float-точка останова

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

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

@grid-float-точка останова: 0px;

2

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

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

1

этот пример с официального сайта: http://getbootstrap.com/examples/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;
}
1

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

@grid-float-breakpoint: 0px;
1

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

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

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

0