Bootstrap 3 Navbar Згорнути

Чи є спосіб збільшити точку, при якій завантажувальний 3 завантажувач завантажується (тобто таким чином, щоб він згортався на випадає на портретних планшетах)?

Ці два стосувались завантажувальної програми 2, але не зараз!

Як змінити поріг згортання навбар, використовуючи завантажувальну систему Twitter?

Змініть стандартну точку розриву навиворі за замовчуванням

У мене була така ж проблема і сьогодні.

Завантаження 4

Це власний функціонал: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

Ви повинні використовувати .navbar-expand{-sm|-md|-lg|-xl}класи:

<nav class="navbar navbar-expand-md navbar-light bg-light">

Завантаження 3

@media (max-width: 991px) {
    .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;
    }
    .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;
    }
}

Просто змініть 991pxна 1199pxдля mdрозмірів.

Демо

Велика різниця між Bootstrap 2 і Bootstrap 3 полягає в тому, що Bootstrap 3 є "спочатку мобільним".

Це означає, що стилі за замовчуванням розроблені для мобільних пристроїв, а у випадку з Navbars - це означає, що він "згортається" за замовчуванням і "розширюється", коли досягає певного мінімального розміру.

На сайті Bootstrap 3 насправді є "підказки" щодо того, що робити: http://getbootstrap.com/components/#navbar

Налаштуйте точку згортання

Залежно від вмісту в навбарі, можливо, вам знадобиться змінити точку, в якій ваш панель навігації переходить між згорнутим та горизонтальним режимом. Налаштуйте змінну @ grid-float-breakpoint або додайте власний медіа-запит.

Якщо ви збираєтеся перекомпілювати LESS, ви знайдете зазначену змінну LESS у variables.lessфайлі. Наразі він встановлений для "розширення", @media (min-width: 768px)що є "малим екраном" (тобто планшетом) за умовами Bootstrap 3.

@grid-float-breakpoint: @screen-tablet;

Якщо ви хочете трохи довше зберегти згорнуте, можете налаштувати його так:

@grid-float-breakpoint: @screen-desktop; (Перерва 992 пікселів)

або швидше розширюватись

@grid-float-breakpoint: @screen-phone (480px точка перерви)

Якщо ви хочете, щоб він розширився пізніше, а не займався повторним компіляцією МЕНШЕ, вам доведеться перезаписати стилі, які застосовуються в 768pxмедіа-запиті, і повернути їх до попереднього значення. Потім повторно додайте їх у відповідний час.

Я не впевнений, чи є кращий спосіб це зробити. Перекомпіляція завантажувальної програми МЕНШЕ ваших потреб - найкращий (найпростіший) спосіб. В іншому випадку вам доведеться знайти всі запити мультимедійних файлів CSS, які впливають на ваш Navbar, перезаписати їх у стилі за замовчуванням @ ширина 768px, а потім повернути їх на більш високій мінімальній ширині.

Перекомпіляція МЕНШЕ зробить для вас всю цю магію лише змінивши змінну. Що в цілому сенс попередніх компіляторів LESS / SASS. =)

(зауважте, я все їх шукав. Це приблизно 100 рядків коду, що мені досить дратує, щоб відмовитись від ідеї та просто перекомпілювати Bootstrap для певного проекту та уникнути зіпсування чогось випадково)

Я сподіваюся, що це допомагає!

Ура!

Найпростіший спосіб - налаштувати завантажувальний інструмент

знайти змінну:

 @grid-float-breakpoint

який встановлено на @ screen-sm, ви можете змінити його відповідно до своїх потреб. Сподіваюся, це допомагає!

вони керуються змінними, не потрібно перебирати джерело. з завантажувальним інструментом спробуйте спочатку змінні, а потім переознакуйте. потім поверніться та повторіть спробу змінних;)

Я використав bootstrap-sass з рейками, але це те саме, що за замовчуванням менше.

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

Це воно! ця довідкова сторінка змінних дуже зручна: https://github.com/twbs/bootstrap/blob/master/less/variables.less

Завдяки Seb33300 у мене це працює. Однак важлива частина, здається, відсутня. Принаймні, у версії 3.1.1 Bootstrap.

Моя проблема полягала в тому, що навігація згорнулася відповідно при правильній ширині, але кнопка меню не працювала. Я не зміг розгорнути і згорнути меню.

Це пов’язано з тим, що class.in клас переосмислюється! Важливим в .navbar-collaps.collapse, і його можна вирішити, додавши також "collap.in". Приклад Seb33300 завершено нижче:

@media (max-width: 991px) {
    .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;
    }
}

Мені хотілося підтримати і прокоментувати відповідь jmbertucci, але мені ще не довіряють елементи управління. У мене було те саме питання і вирішено, як він сказав. Якщо ви використовуєте Bootstrap 3.0, відредагуйте менше змінних у змінних. Без чутливих точок розриву встановлено навколо рядка 200:

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

Потім встановіть значення згортання навібара за допомогою змінної @ grid-float-breakpoint приблизно у рядку 232. За замовчуванням встановлено @ screen-tablet . Якщо ви хочете, ви можете використовувати значення пікселя, але я вважаю за краще використовувати менші змінні.

Якщо проблема, з якою ви стикаєтеся, полягає в тому, що меню розбивається на кілька рядків , ви можете спробувати одне з наступних:

1) Спробуйте зменшити кількість пунктів меню або їх довжину, як-от видалення пунктів меню або скорочення слів.

2) Зменшення прокладки між пунктами меню, наприклад:

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

За замовчуванням оббивка становить 15 пікселів в обидві сторони (зліва та справа).

Якщо ви бажаєте змінити кожну окрему сторону використання:

padding-left: 7px; 
padding-right: 8px;

Цей параметр також впливає на випадаючий список.

Це не дає відповіді на запитання, але може допомогти іншим, хто не хоче возитися з CSS або використовувати менші змінні. Два загальних підходу до вирішення цієї проблеми.

Набвар обвалиться на невеликих пристроях. Точка згортання визначається за допомогою змінної @ grid-float-break-point. За замовчуванням це буде до 768 пікселів. Для екранів нижче ширини екрана 768 пікселів навігаційна панель виглядатиме так:

Можна змінити @ grid-float-breakpoint у variables.less і перекомпілювати Bootstrap. При цьому вам також доведеться змінити @ screen-xs-max в navbar.less. Вам доведеться встановити це значення у вашій новій @ grid-float-breakpoint -1. Дивіться також: https://github.com/twbs/bootstrap/pull/10465 . Це потрібно, щоб змінити форми і панелі навігації на @ grid-float-breakpoint на свою мобільну версію.

Мене турбують проблеми з технічним обслуговуванням та оновленнями вниз від налаштування Bootstrap. Я можу сьогодні задокументувати кроки налаштування та сподіваюся, що особа, яка оновлює Bootstrap через три роки, знайде документацію та повторно застосує кроки (які можуть або не можуть працювати в цей момент). Я думаю, що аргумент можна зробити будь-яким способом, але я вважаю за краще зберігати будь-які налаштування у своєму коді.

Я не зовсім розумію, як може працювати підхід Seb33300. З Bootstrap 4.0.3 це, звичайно, не працювало. Щоб навігаційна панель розширювалася на 1200 замість 768, правила для обох медіа-запитів повинні бути скасовані, щоб запобігти розширенню на 768 і примусовому розширенню на 1200.

У мене є довше меню, яке перетворюватиме iPad у режимі "Портрет". Далі зберігається меню згорнуте до точки перерви 1200:

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

Я зробив CSS спосіб моєї установки Bootstrap 3.0.0, оскільки я не такий знайомий з МЕНШЕ. Ось код, який я додав у свій власний файл css (який завантажую після bootstrap.css), який дозволив мені контролювати, щоб меню завжди працювало як accordion.
Примітка: я загорнув все своє ціле navbarв div з класом, sidebarщоб відокремити поведінку, яку я хотів, щоб це не вплинуло на інші навігаційні елементи на моєму сайті, як-от головне меню. Налаштуйте свої потреби, сподівайтеся, що це допоможе.

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

Додаткове зауваження: я також додав зміни до перемикання головного меню navbar(оскільки код вище на моєму сайті використовується для "підменю" збоку.

Я змінив:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

в:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

А потім також скориговано:

<div class="navbar-collapse collapse navbar-collapse">

в:

<div class="navbar-collapse collapse navbar-collapse-topmenu">

Якщо у вас буде лише одна, navbarя думаю, вам не потрібно буде турбуватися з цього приводу, але це допомогло мені в моєму випадку.

А для тих, хто хоче згортатись на ширину менше стандартної 768px (розширити на ширину менше 768px), це потрібний css:

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

Я думаю, що я знайшов просте рішення змінити точку зриву колапсу, лише через css.

Я сподіваюся, що інші можуть це підтвердити, оскільки я не перевіряв його ретельно, і я не впевнений, чи є побічні ефекти цього рішення.

Ви повинні змінити значення медіа-запитів для таких визначень класів:

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

Це працювало для мене в моєму поточному проекті, але мені все одно потрібно змінити деякі визначення css, щоб правильно організувати меню для всіх розмірів екрана.

Сподіваюсь, це допомагає.