Как изменить порог коллапса navbar с помощью Twitter bootstrap-responsive?

Я использую Twitter Bootstrap 2.0.1 в проекте Rails 3.1.2, реализованном с помощью bootstrap-sass. Я загружаю оба bootstrap.css и bootstrap-responsive.css файлы, а также bootstrap-collapse.js Javascript.

у меня есть жидкий макет с navbar, похожий на пример. Это следует инструкциям navbar "отзывчивый вариант"здесь. Он отлично работает: если страница уже, чем около 940px, панель навигации сворачивается и отображает "кнопку", на которую я могу нажать расширять.

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

как сказать Bootstrap только свернуть панель навигации, если экран меньше 550px в ширину?

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

93
css ruby-on-rails-3 twitter-bootstrap

13 ответов

вы ищете строку 239 из bootstrap-responsive.css

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

здесь max-width значение запускает отзывчивый nav. Измените его на 550px или около того, и он должен изменить размер.

39

Bootstrap > 2.1 & &
  • используйте меньшую версию bootstrap
  • измените переменную @navbarCollapseWidth в переменных.меньше
  • перекомпиляции.

обновление 2013: простой способ

(THX в Archonic через комментарий)

обновление 2014: Bootstrap 3.1.1 и 3.2 (они даже добавил его в документации)

если вы настройка или переопределение/редактирования .less переменные, которые вы ищете:

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
72

вы можете установить новый @media запрос чтобы удалить элементы navbar вниз, как вы считаете нужным, все, что вам нужно сделать, это сбросить первый, чтобы приспособить ваш новый запрос с желаемой шириной падения. Возьмите это, например:

в CSS

/** Modified Responsive CSS **/

@media (max-width: 979px) {
    .btn-navbar {
        display: none;
    }
    .navbar .nav-collapse {
        clear: none;
    }

    .nav-collapse {
        height: auto;
        overflow: auto;
    }

    .navbar .nav {
        float: left;
        margin: 0 10px 0 0;
    }

    .navbar .brand {
        margin-left: -20px;
        padding: 8px 20px 12px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: block;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 0;
        color: #999999;
        font-weight: normal;
        padding: 10px 10px 11px;
    }

    .navbar .nav > li {
        float: left;
    }

    .navbar .dropdown-menu {
        background-clip: padding-box;
        background-color: #FFFFFF;
        border-color: rgba(0, 0, 0, 0.2);
        border-radius: 0 0 5px 5px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        display: none;
        float: left;
        left: 0;
        list-style: none outside none;
        margin: 0;
        min-width: 160px;
        padding: 4px 0;
        position: absolute;
        top: 100%;
        z-index: 1000;
    }

    .navbar-form, .navbar-search {
        border:none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: left;
        margin-bottom: 0;
        margin-top:6px;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: right;
        margin-left: auto;
    }
}

@media (max-width: 550px) {
    .btn-navbar {
        display: block;
    }
    .navbar .nav-collapse {
        clear: left;
    }

    .nav-collapse {
        height: 0;
        overflow: hidden;
    }

    .navbar .nav {
        float: none;
        margin: 0 0 9px;
    }

    .navbar .brand {
        margin: 0 0 0 -5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: none;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 3px 3px 3px 3px;
        color: #999999;
        font-weight: bold;
        padding: 6px 15px;
    }

    .navbar .nav > li {
        float: none;
    }

    .navbar .dropdown-menu {
        background-color: transparent;
        border: medium none;
        border-radius: 0 0 0 0;
        box-shadow: none;
        display: block;
        float: none;
        left: auto;
        margin: 0 15px;
        max-width: none;
        padding: 0;
        position: static;
        top: auto;
    }

    .navbar-form, .navbar-search {
        border-bottom: 1px solid #222222;
        border-top: 1px solid #222222;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: none;
        margin: 9px 0;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: none;
        margin-left: 0;
    }

}

в следующем коде вы можете увидеть, как я включил оригинал @media запрос, который обрабатывает падение перед 979px mark и новый запрос для поддержки желаемой точки падения 550px. Я изменил оригинал запрос прямо из css, реагирующего на bootstrap, чтобы сбросить все стили, примененные к этому конкретному запросу для элементов navbar, и перенести их в новый запрос, который несет точку сброса, которая вам нужна. Таким образом, мы можем коммутировать все стили от исходного запроса до нового запроса, не путаясь в таблице стилей, реагирующей на bootstrap, таким образом значения по умолчанию будут по-прежнему применяться к другим элементам в вашем документе.

вот короткая демонстрация с медиа-запросом отбрасывать на 550px как вы требуете: http://jsfiddle.net/wU8MW/

Примечание: я разместил выше модифицированных @media запросы ниже фрейма css, поскольку новый измененный css должен быть загружен первым, чем отзывчивый css.

11

bootstrap-sass будет поддерживать переменную $navbarCollapseWidth в следующей версии (2.2.1.0). Вы сможете обновить его, чтобы сделать именно то, что вы хотите, как только эта версия будет жить!

6

по состоянию на август 2013 года страница "настройка и загрузка" Bootstrap 3 находится по адресуhttp://getbootstrap.com/customize/

с Bootstrap 3 соответствующей переменной является @grid-float-breakpoint.

Следующая страница переполнения стека содержит дополнительные сведения:Bootstrap 3 Navbar Collapse

5

Я подозреваю (и надеюсь), это будет реализовано в ближайшее время официально. Тем временем я просто делаю простой CSS-Хак, используя visible-phone на раскрывающейся кнопке и visible-tablet на втором наборе кнопок, которые я разместил в navbar. Так перед этим выглядело так:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <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">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

и теперь это выглядит так:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" 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="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

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

4

Я создал отдельный файл SCSS, в котором перечислены все частичные файлы, которые нужны bootstrap, таким образом, я могу включать и выключать частичные файлы в зависимости от потребностей нашего сайта. Таким образом, я могу легко переопределить переменную точки останова. Вот что я получил:

// Core variables and mixins
$grid-float-breakpoint: 991px;
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
//@import "bootstrap/button-groups";
//@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
//@import "bootstrap/popovers";
//@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";
3

вот мой код (все другие решения показали фанки полосу прокрутки, когда панель навигации упала, поэтому я отредактировал код, чтобы он этого не делал). Я не мог опубликовать другой ответ, поэтому я сделаю это здесь, чтобы другие нашли. Я использую rails для этого с Bootstrap 3.0.

assets/stylesheets / framework и переопределяет вставить это: (настройте максимальную ширину на любое значение для достижения вашей цели.)

@media (max-width: 2500px) {
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-collapse.collapse.in {
    display: block!important;
}
.navbar-nav {
    float: none!important;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
2

Bootstrap 3.x

используя меньше, вы можете изменить значение @screen-small для целевой ваш минимальный размер

пример: @screen-small: 600px;

Я использую это только для переключения в режим "крошечного устройства", как только ширина меньше 600px

1

Bootstrap 3.x

используя SASS, вы можете изменить значение $screen-sm, чтобы настроить свой минимальный размер

пример: $screen-sm: 600px;

вам нужно поместить это значение в приложение.файл scss перед @import "bootstrap";

$screen-sm:600px;
@import "bootstrap";

меньше переменных начинаются с"@", просто измените их на"$", чтобы переопределить их перед импортом.

вот список переменных.

1

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

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

  • добавить переменную variables.less Это указывает, когда свернуть панель навигации. Что-то вроде: @navCollapseWidth: 979px
  • изменить responsive-navbar.less...
    • up top change @media (max-width: 979px) to @media (max-width: @navCollapseWidth)
    • в нижней части изменить @media (min-width: 980px) to @media (max-width: @navCollapseWidth - 1)

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

0

взлом Тайлера еще дальше, добавив видим-телефона classed блок и скрытые-телефона класс к элементу в основной складной навигации, вы можете "вытащить" один или два из свернутых элементов для отображения даже в навигационной панели телефона.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" 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="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="visible-phone">
        <ul class="nav">
          <li>Navigation 1</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="hidden-phone">Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>
0

просто запишите этот код в свой собственный стиль.файл CSS и это сработает 

@media (min-width: 768px) and (max-width: 991px) {
        .navbar-collapse.collapse {
            display: none !important;
        }
        .navbar-collapse.collapse.in {
            display: block !important;
        }
        .navbar-header .collapse, .navbar-toggle {
            display:block !important;
        }
        .navbar-header {
            float:none;
        }
        .navbar-nav {
            float: none !important;
            margin: 0px;
        }
        .navbar-nav {
            margin: 7.5px -15px;
        }
        .nav > li {
            position: relative;
            display: block;
        }
        .navbar-nav > li {
            float: none !important;
        }
        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }
        .navbar-collapse {
            padding-right: 15px;
            padding-left: 15px;
            overflow-x: visible;
            border-top: 1px solid transparent;
            box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
        }
        .nav {
            padding-left: 0px;
            margin-bottom: 0px;
            list-style: outside none none;
        }
    }
0