Как изменить порог сворачивания navbar с помощью Twitter-загрузки?

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

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

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

Как сообщить Bootstrap только свернуть навигационную панель, если ширина экрана меньше 550 пикселей?

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

Ответ 1

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

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

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

Ответ 2

Bootstrap > 2.1 && < 3

Используйте менее загрузочную версию
Измените переменную @navbarCollapseWidth в переменных .less
Рекомпилированные.

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

Посетите http://getbootstrap.com/customize/#less-variables
Изменить @navbarCollapseWidth в поле формы
Нажмите "Скомпилировать и загрузить".

(спасибо to 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);

Ответ 3

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

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 и новый запрос для поддержки вашей желаемой точки возврата 550px. Я изменил исходный запрос прямо из загрузочного буфера css до reset всех стилей, применяемых к этому конкретному запросу для элементов navbar, и портировал их на новый запрос, в котором вместо этого есть точка возврата. Таким образом, мы можем переназначить все стили из исходного запроса до нового запроса, не запускаясь в таблице стилей, зависящей от начальной загрузки, таким образом значения по умолчанию будут по-прежнему применяться к другим элементам вашего документа.

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

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

Ответ 4

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

Ответ 5

По состоянию на август 2013 года, страница Bootstrap 3 "Настроить и загрузить" можно найти на http://getbootstrap.com/customize/

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

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

Ответ 6

Я подозреваю (и надеюсь), что это будет реализовано в официальном порядке в ближайшее время. Тем временем я просто делаю простой взлом css, используя видимый телефон на выпадающей кнопке и видимый планшет на втором наборе кнопок, который я разместил на панели навигации. Поэтому, прежде чем это будет выглядеть так:

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

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

Ответ 7

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

// 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";

Ответ 8

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

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

@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;
}

Ответ 9

Bootstrap 3.x

используя МЕНЬ, вы можете изменить значение @screen-small, чтобы настроить минимальный размер

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

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

Ответ 10

Bootstrap 3.x

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

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

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

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

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

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

Ответ 11

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

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

Добавьте переменную в variables.less, которая указывает, когда нужно свернуть навигационную панель. Что-то вроде: @navCollapseWidth: 979px
Затем измените responsive-navbar.less...
- Верхнее изменение @media (max-width: 979px) до @media (max-width: @navCollapseWidth)
- При нижнем изменении @media (min-width: 980px) до @media (max-width: @navCollapseWidth - 1)

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

Ответ 12

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

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

Ответ 13

Просто запишите этот код в свой собственный файл style.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;
        }
    }