Как изменить ширину для перехода в кнопку Bootstrap?

Question

[Владимир Голубь]

Путем опытов выяснил, что переход в кнопку в Bootstrap происходит всегда при ширине 767-768 пикселей не зависимо от ширины контента в меню. Как это контролировать уменьшить или увеличить ?

Решение) Я думаю многие хотят это сделать. Напишу по шагам

1) Находим в файле строки.

@media (min-width: 1250px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            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-right: 0;
    padding-left: 0;
  }
}

и указываем необходимую ширину

2) Находим строки

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

и указываем необходимую ширину

3) Находим строки

@media (min-width: 1250px) {
  .navbar-header {
    float: left;
  }
}

и указываем нужную ширину

4) В вашем файле media.css прописываем, чтобы на нужной ширине li становились блочными.

// За помощь в ответе благодарю Sergey Goryachev

Answer 1

[Сергей Горячев]

Капец, как вы вообще работаете с Бутстрапом, если не знаете основ?
Да и вообще, нахрена браться за Фреймворк, если знаний по адаптиву ноль.

Смотрите в @media-запросах, где прописано это у вас.

Можно еще "путем опытов" поискать через консоль разработчика в браузере.
Весьма полезная штука для изучения.

@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}
@media (min-width: 768px) {
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
}

Comments

[Владимир Голубь]

Я прочитал все документацию, в разделе верстки адаптивного меню нет такого. У меня файл media пустой. Там вообще ничего нет. Поэтому я и спросил как настраивать. Если через консоль, то я так понимаю это прописано в файле js,

[Владимир Голубь]

Sergey Goryachev или подскажите как вы с этим боритесь, я уже все обыскал, посмотрел видео. Делал по ним. Ширина перехода все равно одна.

[Сергей Горячев]

Владимир Голубь:

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

В файле bootstrap.css к примеру. Тут при разрешении больше 768 скрывается навикон.
Если изменить тут значение медиа, бутерброд будет пропадать на другом разрешении.
По такому же принципе ищите, как скрывается меню. Вы же знаете класс.
Просто найдите в этом файле класс и посмотрите медиа, где у меню становится дисплей ноне.
Все ж просто.

[Сергей Горячев]

Владимир Голубь: успешно?

@media (min-width: 768px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }

Даю подсказку, куда копать.

[Владимир Голубь]

Sergey Goryachev: Спасибо сделал, только кнопка осталась. Щас ее буду искать.

[JIN_ok]

Вы свои первые работы на Bootstrap вспомните! Зачем умничать?!