Изменение точки останова на панели навигации при загрузке без использования МЕНЬШЕ

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

Моя проблема такая же, как в этом вопросе: Bootstrap 3 Свернуть Navbar Свернуть

Но все ответы на эти вопросы объясняют, как это сделать, изменяя LESS-переменную. Я не имел дело с МЕНЬШЕ, я использую стилус, поэтому я хочу знать, как это можно сделать с помощью стилуса или другого метода.

Спасибо!

Ответы

Ответ 1

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

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

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

Ответ 2

Для 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

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

2017 UPDATE для Bootstrap 4 (бета-версия)

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

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

navbar-expand-sm= мобильное меню на экранах xs < 576px
navbar-expand-md= мобильное меню на экранах sm < 768px
navbar-expand-lg= мобильное меню на экранах md < 992px
navbar-expand-xl= мобильное меню на экранах lg < 1200px
navbar-expand= никогда не использовать мобильное меню
(no expand class)= всегда использовать мобильное меню

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

Ответ 3

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

Ответ 4

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

Перейдите к строке 2923 в bootstrap.css(также в мини-версии) и измените @media screen and (min-width: 768px) { на @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;
  }
}

Ответ 5

В исходном коде Bootstrap 3.LESS существует переменная, определенная в 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;

Ответ 6

Я просто сделал это успешно, используя следующий код 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;
    }

}

Ответ 7

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

Просто переопределите переменные перед загрузкой @import:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

Ответ 8

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

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

демонстрационный код

Ответ 9

В bootstrap v4 навигацию можно рано или поздно свернуть с помощью разных классов css

например:

Navbar-переключаемый-см
Navbar-переключаемый-мД
Navbar-переключаемой-Л.Г.

С помощью кнопки навигации:

скрытых см вверх
скрытого мкр-вверх
скрытых Л.Г. вверх

Ответ 10

Лучше всего использовать порт используемого вами процессора CSS.

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

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

В противном случае поиск и замена - ваш лучший друг прямо в версии css...

Ответ 11

Для 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;
   }
}

Ответ 12

Это сработало для меня 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;
}

Ответ 13

Вот что помогло:

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