Bootstrap не работает на 768px, кто сталкивался?

Question

[Ihimura]

Использовал bootstrap.css и bootstrap.js для создания сайта, вот только наткунлся на не очень хорошую проблему: как только ширина страницы становится 768px, все стили Bootstrap будто отключаются, а скрипты перестают работать(тоже Bootstrap) и сайт просто уродуется. Так вот, это я что-то не так сделал или кто-то еще сталкивался и это маленький недочет разработчиков? Если это моя вина, то можете указать на ошибку? Спасибо.
Примечание: на 769 и выше и на 767 и ниже, сайт работает как надо.

Вот сам сайт: q900237t.bget.ru

Answer 1

[Andrey_Hmytron]

Вы используйте media screen and (max-width: 767px) вместо media screen and (max-width: 768px).
Ведь если посмотреть на это media в стандартном bootstrap - он использует 767 при max-width а 768 (который у Вас) при mix-width joxi.ru/82QQaayi1OokX2

Comments

[Ihimura]

Огроменное вам спасибо, выручили.

Answer 2

[metallix]

На хроме всё хорошо отображает

Comments

[Ihimura]

А вы попробуйте в инструмене разработчика уменьшить ширину ровно до 768px.

Answer 3

[Андрей]

Вам в файле q900237t.bget.ru/styles/homepage_media.css необходимо расширить секцию

@media screen and (max-width: 768px){
	nav{ width:100%}
	nav ul{float:none;text-align:center;padding:0}
	nav ul li{display:block}
	.section3_bg img,.section4_bg img{width:300px}
	.section6_bg .dots{left:-10px}
	.menu-btn{display:block;margin-bottom:20px}
}

То есть для ширины менее 768 в этом файле блоки описаны более полно, нужно соответствующие указания прописать и для секции max-width: 768px

Comments

[Ihimura]

Я понял, что я могу сам выправить это все своими стилями, но там банально и скрипты перестают работать. По логике на 768 Bootstrap должен перети с lg классов на sm, однако тут появляется какое-то промежуточное звено в 1 пиксель.

[Ihimura]

И да, как раз ширина iPad и является этим промежуточным звеном.

[Андрей]

Скрипты bootstrap не влияют на стили и значение lg и sm-классов. Только media.
Попробуйте media-блоки в этом файле расположить по принципу mobile-first, от есть от меньшего разрешения к большему. Сейчас наоборот они стоят.