Изменить точку останова сворачивания bootstrap navbar без использования меньше

В настоящее время, когда ширина браузера падает ниже 768px, панель навигации переходит в свернутый режим. Я хочу изменить эту ширину на 1000px, поэтому, когда браузер ниже 1000px, navbar переходит в свернутый режим. Я хочу сделать это, не используя меньше, я использую стилус не меньше.

моя проблема такая же, как в этом вопросе: Bootstrap 3 Navbar Collapse

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

спасибо!

168
collapse css navbar responsive-design twitter-bootstrap

16 ответов

вы должны написать конкретные медиа-запросов для этого, из вашего вопроса, ниже 768px, navbar рухнет, поэтому примените его выше 768px и ниже 1000px, вот так:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

это скроет сворачивание navbar до появления по умолчанию загрузочного устройства. Когда класс collapse переворачивает внутренние активы внутри navbar collapse, они будут автоматически скрыты, как и wise, вам нужно установить css в соответствии с желаемым дизайном.

47

обновление 2018

Bootstrap 4

изменение точки останова navbar проще в Bootstrap 4 с помощью navbar-expand-* классы:

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

  • navbar-expand-sm = мобильное меню на экранах xs
  • navbar-expand-md = мобильное меню на экранах sm
  • navbar-expand-lg = мобильное меню на экранах md
  • navbar-expand-xl = мобильное меню на экранах lg
  • navbar-expand = никогда не используйте мобильный меню
  • (no expand class) = всегда используйте мобильное меню

если исключить navbar-expand-* мобильное меню будет использоваться в all Ширин. Вот демонстрация всех 6 состояний navbar:Bootstrap 4 Navbar Пример

вы также можете использовать пользовательские точки останова (???px), добавив немного CSS. Например, вот 1300px..

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 таможни Navbar Останова
Bootstrap 4 Navbar Точки Останова Примеры

Bootstrap 3

Для Bootstrap 3.3.x, вот работающего CSS для переопределения точки останова navbar. Изменить 991px к размерности пикселя точки, в которой требуется свернуть навигационную панель...

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

рабочий пример для 991px:http://www.bootply.com/j7XJuaE5v6
Рабочий пример для 1200px: https://www.codeply.com/go/VsYaOLzfb4 (с формой поиска)

Примечание: выше работает для чего-нибудь более 768px по. Если вам нужно изменить его на меньше, чем 768px по на пример меньше, чем 768px здесь.

307

на bootstrap3 измените эту переменную @grid-float-точка останова к одному вам. Значением по умолчанию является 768px по

44

наконец-то понял, как изменить ширину коллапса, играя с "@ grid-float-breakpoint " в http://getbootstrap.com/customize/.

перейти к строке 2923 в bootstrap.css (также минимальная версия) и change @media screen and (min-width: 768px) { to @media screen and (min-width: 1000px) {

поэтому код будет в конечном итоге:

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}
23

Я просто сделал это успешно, используя следующий код CSS.

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}
12

в Bootstrap 3 .Меньше исходный код есть переменная, определенная в variables.less под названием @grid-float-breakpoint который имеет следующий полезный комментарий:

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

совпадающие @grid-float-breakpoint-max значение равно минус 1px:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

устранение:

поэтому просто установите @grid-float-breakpoint значение для 1000px вместо этого и перестроить bootstrap.less на bootstrap.css:

например

@grid-float-breakpoint: 1000px;
12

способ Sass изменения переменных начальной загрузки фактически документирован на bootstrap-sass страница github.

просто переопределите переменные перед @import bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';
10

в дополнение к @Skely ответ, чтобы сделать выпадающее меню внутри работы navbar также добавьте свои классы для переопределения. Финальный код:

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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-nav {
            float: none!important;
            /*margin: 7.5px -15px;*/
            margin: 7.5px 50px 7.5px -15px
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .navbar-text {
            float: none;
            margin: 15px 0;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }

код

6

в bootstrap v4 навигация может быть свернута рано или поздно, используя различные классы css

например:

  • navbar-toggleable-sm
  • navbar-toggleable-md
  • navbar-toggleable-lg

с помощью кнопки для навигации:

  • скрытый-sm-up
  • hidden-md-up
  • скрытый-lg-up
4

для Bootstrap 3.3 это единственный код:

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
3

лучше всего было бы использовать порт процессора CSS, который вы используете.

Я большой поклонник SASS, поэтому в настоящее время я использую https://github.com/thomas-mcdonald/bootstrap-sass

похоже, что здесь есть вилка для стилуса:https://github.com/Acquisio/bootstrap-stylus

в противном случае Search & Replace-ваш лучший друг прямо в версии css...

2

это сработало для меня Bootstrap3

@media (min-width: 768px) {
    .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;
          margin: 7.5px -15px;
      }
      .navbar-nav>li {
          float: none;
      }
      .navbar-nav>li>a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
}

потребовалось некоторое время, чтобы понять эти два:

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}
1

Привет я думаю, вы можете сделать это с помощью CSS, как это вы можете изменить точку останова bootstrap menu 

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}
1

Это то, что сделал трюк для меня:

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}
0

в bootstrap 4, Если вы хотите переехать, когда navbar-expand -*, расширяется и сворачивается и показывает и скрывает гамбургер (navbar-toggler), вы должны найти этот стиль/определение в bootstrap.css и переопределите его в своем собственном пользовательском стиле.css (или непосредственно в bootstrap.CSS, если вы так склонны).

например. Я хотел, чтобы navbar-expand-lg сворачивался и показывал navbar-toggler в 950px. В Bootstrap.css я нахожу:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

и ниже ... 

@media (min-width:992px) { 
    ... lots of styling ...
}

Я скопировал оба запроса @media и вставил их в свой стиль.css, затем изменил размер, чтобы соответствовать моим потребностям. Я хотел, чтобы он рухнул на 950px. Запросы @media должны быть разных размеров (я предполагаю), поэтому я установил максимальную ширину контейнера в 949.98 px и использовал 950px для другого запроса @media, поэтому следующий код был добавлен к моему стилю.стиль CSS. Это было нелегко отделить от скрученных решений, которые я нашел на Stackoverflow и в других местах. Надеюсь, это помогает.

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}
0

здесь мой рабочий код используется в React с Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>
0