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

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



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



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



спасибо!

818   16  

16 ответов:

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

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

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

47  
2016-04-04 18:55:27

обновление 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 Custom Navbar Точка останова
Bootstrap 4 Navbar Breakpoint Examples

Bootstrap 3

Для Bootstrap 3.3.х, вот это работающего 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 по the пример менее 768px здесь.

307  
2018-02-26 19:22:11

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

44  
2015-03-05 04:21:09

наконец-то разобрался, как изменить ширину развала при помощи махинаций с '@сетки-плавающая точка останова на http://getbootstrap.com/customize/.

перейти к строке 2923 в bootstrap.css (также минимальная версия) и изменить @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  
2014-03-19 08:42:38

Я только что сделал это успешно, используя следующий код 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  
2015-05-15 23:00:26

в 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  
2015-08-03 16:35:34

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

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

$grid-float-breakpoint: 1000px;

@import 'bootstrap';
10  
2016-07-05 09:51:27

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

    @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  
2016-05-27 08:25:25

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

например:

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

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

  • hidden-sm-up
  • hidden-md-up
  • hidden-lg-up
4  
2017-10-02 22:30:16

для 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  
2016-04-08 14:23:34

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

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

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

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

2  
2013-11-07 06:21:21

это сработало для меня 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  
2017-11-15 02:51:35

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

    @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  
2018-01-26 13:19:26

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

@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  
2016-06-03 10:25:09

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

например. Я хотела шапку-расширить-LG, который рушится и показывает шапку-переключения в 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 должны быть разных размеров (я предполагаю), поэтому я установил контейнер max-width в 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  
2018-02-21 16:26:25

вот мой рабочий код, использующий в React with 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  
2018-03-17 09:10:58

Comments

    Ничего не найдено.
Click here to cancel reply.