Как изменить порог сворачивания навигационной панели с помощью Twitter, отвечающего за загрузку?

94

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

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

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

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

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

css ruby-on-rails-3 twitter-bootstrap Марк Берри
источник
Отличный вопрос! Из информации, которую вы указали в своем вопросе, я смог реализовать складную панель навигации с нуля. Спасибо!
methodMan

Ответы:

41

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

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

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

метод действия
источник
12
Спасибо. bootstrap-responsive.cssпохоронен в жемчужине бутстрап-дерзости. Да, я мог бы его отредактировать, но потом, когда гем будет обновлен, мне придется сделать это снова. Есть ли способ переопределить запрос @media, аналогично переопределению других элементов CSS?
Марк Берри
Я не могу придумать никакого способа добиться переопределения без повторного повторения всех объявлений CSS.
methodofaction
Хорошо спасибо. Я попробовал этот подход, переопределив эту строку в коде драгоценного камня, и он вроде как работает, но я получаю дополнительные горизонтальные отступы на панели навигации ниже ширины 767 пикселей, предположительно из-за CSS в @media (max-width: 767px)блоке. Похоже, мне придется сделать более обширное переопределение, как предлагается в ответе Андреса Ильича.
Марк Берри,
2
Как упоминалось в моем комментарии к ответу @Andres Ilich, прямое обновление исходного кода кажется меньшим из двух зол, когда дело доходит до ремонтопригодности, поэтому я пока приму это решение. Я могу жить с 767px в качестве минимального порога, хотя я, вероятно, мог бы еще больше уменьшить его, создав собственный контейнер для навигационной панели, на который не влияет @media (max-width: 767px). Надеюсь, что Bootstrap (или bootstrap-sass) однажды будет включать в себя средства для использования переменных для установки пороговых значений, но я думаю, что это потребует интерполяции в селекторах носителей .
Марк Берри
1
CSS переопределения точки останова на навигационной панели изменился для Bootstrap 3 - вот рабочий пример для 3.1: bootply.com/120604
Zim
73

Загрузочный> 2.1 && <3

  • Используйте меньшую версию начальной загрузки
  • Измените переменную @navbarCollapseWidth в variables.less
  • Перекомпилируйте.

Обновление 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);
Биджан
источник
6
Вы можете посетить twitter.github.com/bootstrap/customize.html#variables и изменить ширину и загрузить. Компиляция не требуется.
Archonic
Текст ссылки и кнопки обновлен: getbootstrap.com/customize/#less-variables & "Compile and Download"
digitalextremist
Это работает и с @navbarCollapseWidth: 600px;гемом twitter-bootstrap-rails, если вы поместите что-то вроде boostrap_and_overrides.css.less.
sffc
Кажется, этого больше нет в Bootstrap 3. :(
CodingWithSpike
А как насчет Bootstrap 4?
Аарон Франке
11

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

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

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

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

Андрес Ильич
источник
Спасибо за подробный ответ. Кажется, это работает - я все еще пытаюсь понять, как. Если я правильно вас понял, вы (1) клонировали исходный @media (max-width: 979px)запрос, чтобы сделать новый @media (max-width: 550px)запрос. Затем (2) вы вручную закодировали новый запрос 979px, чтобы переопределить эффекты запроса 979px в основном bootstrap-responsive.css? Последовательность тегов в вашем CSS, похоже, не соответствует последовательности bootstrap-responsive.css, поэтому мне трудно сравнивать их, чтобы увидеть, что вы сделали.
Марк Берри
@MarkBerry Вы на правильном пути. @media (max-width: 550px)Запрос я написал не следует начальному @media (max-width: 979px)синтаксису запросов , потому что все , что я сделал быстрый пример переопределения его вручную через поджигатель и копировать / вставить, стал ленивым на том, но правильный способ сделать это , как вы упомянули о вашем втором точка.
Андрес Ильич
1
Когда дело доходит до ремонтопригодности, это непростая задача. Я боюсь, что такое обширное переопределение, хотя и обеспечивает абсолютный контроль, будет означать множество ручных проверок после каждого обновления Bootstrap по сравнению с прямым обновлением одной или двух строк исходного кода согласно предложению @Duopixel. Я использую Bootstrap отчасти потому, что я не специалист по CSS, поэтому я думаю, что пока выберу более простое решение.
Марк Берри,
6

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

трисвеб
источник
Не могли бы вы объяснить, где вы поместили эту переменную?
Энди Хайден
Перед любым импортом Bootstrap, например@import "bootstrap";
Эшли
5

По состоянию на август 2013 г. страницу Bootstrap 3 «Настройка и загрузка» можно найти по адресу http://getbootstrap.com/customize/.

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

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

StackOverflowUser
источник
4

Я подозреваю (и надеюсь), что это скоро будет официально реализовано. А пока я просто делаю простой css-хак, используя visible-phone на кнопке раскрывающегося списка и visible-tablet на втором наборе кнопок, которые я разместил на панели навигации. Раньше это выглядело так:

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

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

Тайлер
источник
3

Я создал отдельный файл 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";
mae
источник
2

Вот мой код (все другие решения показывали забавную полосу прокрутки, когда панель навигации опускалась, поэтому я отредактировал код, поэтому это не так). Я не мог опубликовать другой ответ, поэтому сделаю это здесь, чтобы другие нашли. Я использую рельсы для этого с 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;
}
пират694
источник
1

Bootstrap 3.x

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

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

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

ДжейсонС
источник
Вы знаете, как это сделать с помощью SCSS?
bcackerman
извини, я нет. Я думал, что bootstrap был разработан с использованием LESS, поэтому вам, возможно, придется сделать это способом .css (см. ответы на bootstrap 2 выше)
JasonS
1

Bootstrap 3.x

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

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

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

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

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

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

пристрастие к кодированию
источник
Это нарушает функциональность
blnc 06
1

Bootstrap 4.x

Изменить порог коллапса в Bootstrap 4.x совсем несложно. Всего 6 случаев:

  1. Всегда расширять, никогда не сворачивать (т.е. точка останова 0 пикселей): <nav class="navbar navbar-expand">...</nav>
  2. Точка останова sm (576px):<nav class="navbar navbar-expand-sm">...</nav>
  3. Точка останова - md (768 пикселей):<nav class="navbar navbar-expand-md">...</nav>
  4. Точка останова - lg (992px):<nav class="navbar navbar-expand-lg">...</nav>
  5. Точка останова - xl (1200 пикселей):<nav class="navbar navbar-expand-xl">.../nav>
  6. Всегда сворачивайте, никогда не расширяйте (т.е. точка останова ∞px). : <nav class="navbar">...</nav>(Просто удалите navbar-expand-*класс. Mobile-first, как в Bootstrap 4.x)

Кредит на эту статью Кэрол Скелли Я нашел https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a

джинхр
источник
0

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

Еще лучше было бы отправить это как пул-реквест на 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 одним из предложенных методов .

Джейсон Каприотти
источник
Судя по всему, Bootstrap 2.0.4 изменил файловую структуру для адаптивного материала. См. Комментарий автора bootstrap-sass @Thomas McDonald. Я еще не вникал в это, но это может позволить более легкую модификацию порога даже с версией SASS.
Марк Берри
Мне жаль; Я полностью пропустил комментарий Sass в вопросе ... Я просто сосредоточился на Bootstrap на основе категории. Однако файловая структура выглядит так же, как то, что я видел в Bootstrap ... в любом случае я обновлю свой ответ, он отвечает на вопрос.
Джейсон Каприотти
Не беспокойся. И я полностью согласен с тем, что лучшим решением было бы, чтобы бутстрап изначально предлагал переменную или серию переменных, которые управляют порогами коллапса навигационной панели. У меня недостаточно опыта работы с CSS, LESS, SASS или медиа-запросами, чтобы написать это улучшение;).
Марк Берри
0

Продолжая хакерство Тайлера, добавляя блок классов видимого телефона и класс скрытого телефона к элементу в основной сворачиваемой навигации, вы можете «вытащить» один или два свернутых элемента для отображения даже на панели навигации телефона.

<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

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