Изменить начальную точку перерыва на Navbar, не используя меньше

StackOverflow https://stackoverflow.com/questions/19827605

Вопрос

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

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

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

Спасибо!

Это было полезно?

Решение 2

Вы должны написать конкретный СМИ запрос Для этого, по вашему вопросу, ниже 768px, Navbar будет рухнуть, поэтому примените его выше 768px и ниже 1000px, точно так же:

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

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

Другие советы

Обновление 2018 года

Начальная загрузка 4

Изменение точки перерыва NAVBAR легче в начальной загрузке 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 Пример

Вы также можете использовать пользовательскую точку останова (??? 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 .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-custom .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom > .container {
        flex-wrap: nowrap;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Начальная загрузка 4 Обычай Navbar Breakpoint
Bootstrap 4 Navbar Point Proce Point

** Bootstrap 3 **

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

@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 (с формой поиска)

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

в Bootstrap3, изменить эту переменную @Grid-Float-Breakpoint к тому, что вам нужно. Значение по умолчанию составляет 768px

Наконец разработал, как изменить ширину коллапса, возившись с «@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;
  }
}

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

}

В начальной загрузке 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 Вместо этого значение до 1000 пикселей и восстановления bootstrap.less в bootstrap.css:

например

@grid-float-breakpoint: 1000px;

Способ изменения переменных начальной загрузки фактически задокументирован на Bootstrap-Sass GitHub Page.

Просто переопределите переменные перед тем, как @import Bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

В дополнение к @skely respond, чтобы сделать выпадающие меню Внутри работы 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;
        }
    }

демо -код

Navbars может использовать .navbar-toggler, .navbar-collapse и .navbar-expand {-sm | -md | -lg | -xl} для изменения, когда их контент рушится за кнопкой. В сочетании с другими утилитами вы можете легко выбрать, когда показывать или скрывать определенные элементы.

Для Navbars, которые никогда не разрушаются, добавьте класс .Navbar-Expand на Navbar. Для Navbars, которые всегда разрушаются, не добавляйте ни одного класса. Навбар-экспанд.

Например :

<nav class="navbar navbar-expand-lg"></nav>

Мобильное меню показывает на большом экране.

Ссылка :https://getbootstrap.com/docs/4.0/components/navbar/

В Bootstrap V4 навигация может быть обрушена рано или поздно, используя различные классы CSS

например:

  • NAVBAR-TOGLABLE-SM
  • NAVBAR-TOGLABLE-MD
  • NAVBAR-TOGLABLE-LG

С кнопкой для навигации:

  • Скрытый-Смп
  • Скрытый-мд-UP
  • скрытый

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

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

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

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

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

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

Привет, я думаю, вы можете сделать это с помощью CSS, подобного этому, вы можете изменить меню Bootstrap Bootstrap. 

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

Это рабочий код для меня. (Также раскрывающиеся ссылки на Navbar) работают)

@media (max-width: 1199px) {
  .navbar-nav {
    margin: 7.5px -15px;
 }
  .ul-links {
    display: block;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
  }  
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }

  .navbar-collapse.collapse {
      display: none!important;
      max-height: none;
  }
  .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;
  }
}

Вот что это сделало для меня:

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

В начальной загрузке 4, если вы хотите переоценить, когда Navbar-Expand-*, расширяется, обрушивается, показывает и скрывает гамбургер (Navbar-toggler), вы должны найти этот стиль/определение в Bootstrap.css и переопределить его в своем Собственный customstyle.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 и сунул их в свой стиль. Я мой случай, я хотел, чтобы он рухнул на 950px. Запросы @Media должны быть разными размерами (я предполагаю), поэтому я установил контейнер максимальной шириной на 949,98PX и использовал 950px для другого запроса @Media, и поэтому следующий код был добавлен в мой style.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%;
    }
}

Здесь мой рабочий код с использованием реагирования с начальной загрузкой

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

Теперь он поддерживается на начальной загрузке 4.4

navbar-expand-sm
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top