semen78 Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 Всем привет, помогите пожалуйста примером кода, что бы в описании к товару сделать два див блока как на картинке, и что бы при уменьшении разрешения, например меньше 700px, правый блок вставал вниз под левый. Сам что то не допетрю Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
spectre Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 http://htmlbook.ru/ Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Blast Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 21 минуту назад, semen78 сказал: Всем привет, помогите пожалуйста примером кода, что бы в описании к товару сделать два див блока как на картинке, и что бы при уменьшении разрешения, например меньше 700px, правый блок вставал вниз под левый. Сам что то не допетрю <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... semen78 Опубликовано: 23 января 2021 Автор Поделиться Опубликовано: 23 января 2021 9 минут назад, Blast сказал: <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> два блока, один над другим) А как их рядом поставить? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... colordays Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 Сделайте для ваших дивов width: 50%; float: left; Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 2 часа назад, semen78 сказал: Всем привет, помогите пожалуйста примером кода, что бы в описании к товару сделать два див блока как на картинке, и что бы при уменьшении разрешения, например меньше 700px, правый блок вставал вниз под левый. Сам что то не допетрю если по-современному делать, то так: <div class="wrapper"> <div class="div-1"></div> <div class="div-2"></div> </div> <style> .wrapper { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-direction: normal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; flex-wrap: wrap; } .wrapper > div { flex: 1 1 50%; } @media (max-width: 700px) { .wrapper > div { flex: 1 1 100%; } } </style> 2 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SooR Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 18 минут назад, WIXVW сказал: если по-современному делать, то так: Этой современной технологии уже 7 лет с официальной поддержки браузерами. Префиксы можно убрать. Автору 2 часа назад, semen78 сказал: два блока, один над другим) А как их рядом поставить? Вам не дописали <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 19 минут назад, SooR сказал: Этой современной технологии уже 7 лет с официальной поддержки браузерами. Префиксы можно убрать. Автору Вам не дописали <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> Всегда был уверен в этом, как в том что дваждыдвачетыре... Пока не начинаешь лазить по фтп разных магазинов, в которых стили самого бутстрап переписаны столько же произвольно , сколь и глупо . И вот пишешь такому товарищу подобные примеры, а он не упоминая о своих шаловливых ручках , продолжает писать что нихрена ему такие советы не помогают.... Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SooR Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 18 минут назад, Tom сказал: Всегда был уверен в этом, как в том что дваждыдвачетыре... Пока не начинаешь лазить по фтп разных магазинов, в которых стили самого бутстрап переписаны столько же произвольно , сколь и глупо . И вот пишешь такому товарищу подобные примеры, а он не упоминая о своих шаловливых ручках , продолжает писать что нихрена ему такие советы не помогают.... Ага, bootstrap подключен, а из его стилей там только .btn в лучшем случае. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... matroskin92 Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 Без гридов как-то скучной тема будет <div class="grid"> <div class="cell">Раз</div> <div class="cell">Два</div> </div> .grid { display: grid; grid-gap: 1rem; } @media only screen and (min-width: 700px){ .grid { grid-template-columns: repeat(2, 1fr); } } .cell { text-align: center; padding: 1rem; border: 1px solid; } 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 2 часа назад, SooR сказал: Этой современной технологии уже 7 лет с официальной поддержки браузерами. Префиксы можно убрать. Автору Вам не дописали <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> может и 7 лет, но уж получше, чем бутстрап Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... HyperLabTeam Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 10 минут назад, WIXVW сказал: может и 7 лет, но уж получше, чем бутстрап смысл в этом если можно встроенное использовать Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 2 минуты назад, AWARO сказал: смысл в этом если можно встроенное использовать например, потому что бутстраповские sm, xs со своими @media max-width уже не попадают под viewport современных моделей Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 26 минут назад, WIXVW сказал: например, потому что бутстраповские sm, xs со своими @media max-width уже не попадают под viewport современных моделей Каких ? Можно примеры, очень интересно ? 2 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... matroskin92 Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 6 часов назад, Tom сказал: Каких ? Можно примеры, очень интересно 320, 360, 410 иногда бывает очень сильно нужно, но при чем тут бутстрап с его сеткой, я хз Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 2 часа назад, matroskin92 сказал: 320, 360, 410 Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 8 часов назад, Tom сказал: Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. все верно Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 А примеры будут? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 13 минут назад, WIXVW сказал: все верно и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 37 минут назад, Dimasscus сказал: и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 (изменено) 47 минут назад, Tom сказал: А примеры будут? The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px Изменено 24 января 2021 пользователем WIXVW 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 33 минуты назад, WIXVW сказал: почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. где я написал что он ваш и что именно ваш кривой? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 30 минут назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Venter Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 44 минуты назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px не вижу вообще никаких проблем с этим, если уж так надо на каком то размере экрана что то по своему то не проблема добавить свои классы со своими условиями и всунуть их в разметку. А так бутстрап уже давно есть на флексе и работает нормально. Кстати, было дело столкнулся с проблемкой именно айфон и его родной браузер, к примеру <div class="row"> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> </div> примерно вот такая разметка общая, там блоки в виде кнопок в ряд были, и вот, на бутстрапе 3 с его float left к примеру 1 ряд нормально на экранах узких, со второго ряда съезжать начинает правый блок, на sm экранах раз через раз нормально. Решилось только бутстрапом на флексе. Короче как на скрине примерно вот такая проблемка была, причем не на всех айфонах, точно уже не помню на 2 моделях вот так криво было, проверяли с клиентом именно на телефонах, у него сервис по ремонту телефонов был. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 25 января 2021 Поделиться Опубликовано: 25 января 2021 14 часов назад, Dimasscus сказал: возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. @320 flex-direction: column @768 flex-direction: row все. а вообще, посмотрите на codepen.io или на других ресурсах, что можно делать на флексе. и, кстати, как вы на бутстрапе расположите 5 элементов в ряд ровно, с одинаковыми расстояниями? с его 12 колоннами. на флексе можно рисовать ровные сетки из любого количества элементов, даже, если у вас в одной строке 5 штук, а во второй - 4. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Назад 1 2 Вперёд Страница 1 из 2 Создайте аккаунт или войдите в него для комментирования Вы должны быть пользователем, чтобы оставить комментарий Создать аккаунт Зарегистрируйтесь для получения аккаунта. Это просто! Зарегистрировать аккаунт Войти Уже зарегистрированы? Войдите здесь. Войти сейчас Поделиться Больше способов поделиться... Подписчики 3 Перейти к списку тем Сейчас на странице 0 пользователей Нет пользователей, просматривающих эту страницу. Последние темы Последние дополнения Последние новости Вся активность Главная Opencart 3.x Opencart 3.x: Общие вопросы Как сделать два div блока Покупцям Оплата розширень фізичними особами Оплата розширень юридичними особами Політика повернень Розробникам Регламент розміщення розширень Регламент продажу та підтримки розширень Віртуальний обліковий запис автора Політика просування оголошень API каталогу розширень Вирішення спорів щодо авторських прав Корисна інформація Публічна оферта Політика повернень Політика конфіденційності Платіжна політика Політика передачі особистих даних Політика прозорості Останні розширення Deals – адаптивный универсальный шаблон Автор: octemplates Динамичесткая инфострока в шапке + позиция в макете для opencart\ocstore 2x, 3x Автор: Lito911 Единицы Измерения Товара Автор: RoS Opencart Product Search by Image Автор: slavoglo Простой массовый редактор цен. Fast Price Edit Автор: Sha × Уже зарегистрированы? Войти Регистрация Раздел покупок Назад Приобретенные дополнения Ваши счета Список желаний Альтернативные контакты Форум Новости ocStore Назад Официальный сайт Демо ocStore 3.0.3.2 Демо ocStore 2.3.0.2.4 Скачать ocStore Документация История версий ocStore Блоги Модули Шаблоны Назад Бесплатные шаблоны Платные шаблоны Где покупать модули? Услуги FAQ OpenCart.Pro Назад Демо Купить Сравнение × Создать... Важная информация На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности. Я принимаю
Blast Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 21 минуту назад, semen78 сказал: Всем привет, помогите пожалуйста примером кода, что бы в описании к товару сделать два див блока как на картинке, и что бы при уменьшении разрешения, например меньше 700px, правый блок вставал вниз под левый. Сам что то не допетрю <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... semen78 Опубликовано: 23 января 2021 Автор Поделиться Опубликовано: 23 января 2021 9 минут назад, Blast сказал: <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> два блока, один над другим) А как их рядом поставить? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... colordays Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 Сделайте для ваших дивов width: 50%; float: left; Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 2 часа назад, semen78 сказал: Всем привет, помогите пожалуйста примером кода, что бы в описании к товару сделать два див блока как на картинке, и что бы при уменьшении разрешения, например меньше 700px, правый блок вставал вниз под левый. Сам что то не допетрю если по-современному делать, то так: <div class="wrapper"> <div class="div-1"></div> <div class="div-2"></div> </div> <style> .wrapper { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-direction: normal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; flex-wrap: wrap; } .wrapper > div { flex: 1 1 50%; } @media (max-width: 700px) { .wrapper > div { flex: 1 1 100%; } } </style> 2 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SooR Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 18 минут назад, WIXVW сказал: если по-современному делать, то так: Этой современной технологии уже 7 лет с официальной поддержки браузерами. Префиксы можно убрать. Автору 2 часа назад, semen78 сказал: два блока, один над другим) А как их рядом поставить? Вам не дописали <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 19 минут назад, SooR сказал: Этой современной технологии уже 7 лет с официальной поддержки браузерами. Префиксы можно убрать. Автору Вам не дописали <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> Всегда был уверен в этом, как в том что дваждыдвачетыре... Пока не начинаешь лазить по фтп разных магазинов, в которых стили самого бутстрап переписаны столько же произвольно , сколь и глупо . И вот пишешь такому товарищу подобные примеры, а он не упоминая о своих шаловливых ручках , продолжает писать что нихрена ему такие советы не помогают.... Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SooR Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 18 минут назад, Tom сказал: Всегда был уверен в этом, как в том что дваждыдвачетыре... Пока не начинаешь лазить по фтп разных магазинов, в которых стили самого бутстрап переписаны столько же произвольно , сколь и глупо . И вот пишешь такому товарищу подобные примеры, а он не упоминая о своих шаловливых ручках , продолжает писать что нихрена ему такие советы не помогают.... Ага, bootstrap подключен, а из его стилей там только .btn в лучшем случае. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... matroskin92 Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 Без гридов как-то скучной тема будет <div class="grid"> <div class="cell">Раз</div> <div class="cell">Два</div> </div> .grid { display: grid; grid-gap: 1rem; } @media only screen and (min-width: 700px){ .grid { grid-template-columns: repeat(2, 1fr); } } .cell { text-align: center; padding: 1rem; border: 1px solid; } 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 2 часа назад, SooR сказал: Этой современной технологии уже 7 лет с официальной поддержки браузерами. Префиксы можно убрать. Автору Вам не дописали <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> может и 7 лет, но уж получше, чем бутстрап Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... HyperLabTeam Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 10 минут назад, WIXVW сказал: может и 7 лет, но уж получше, чем бутстрап смысл в этом если можно встроенное использовать Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 2 минуты назад, AWARO сказал: смысл в этом если можно встроенное использовать например, потому что бутстраповские sm, xs со своими @media max-width уже не попадают под viewport современных моделей Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 26 минут назад, WIXVW сказал: например, потому что бутстраповские sm, xs со своими @media max-width уже не попадают под viewport современных моделей Каких ? Можно примеры, очень интересно ? 2 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... matroskin92 Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 6 часов назад, Tom сказал: Каких ? Можно примеры, очень интересно 320, 360, 410 иногда бывает очень сильно нужно, но при чем тут бутстрап с его сеткой, я хз Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 2 часа назад, matroskin92 сказал: 320, 360, 410 Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 8 часов назад, Tom сказал: Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. все верно Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 А примеры будут? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 13 минут назад, WIXVW сказал: все верно и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 37 минут назад, Dimasscus сказал: и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 (изменено) 47 минут назад, Tom сказал: А примеры будут? The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px Изменено 24 января 2021 пользователем WIXVW 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 33 минуты назад, WIXVW сказал: почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. где я написал что он ваш и что именно ваш кривой? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 30 минут назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Venter Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 44 минуты назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px не вижу вообще никаких проблем с этим, если уж так надо на каком то размере экрана что то по своему то не проблема добавить свои классы со своими условиями и всунуть их в разметку. А так бутстрап уже давно есть на флексе и работает нормально. Кстати, было дело столкнулся с проблемкой именно айфон и его родной браузер, к примеру <div class="row"> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> </div> примерно вот такая разметка общая, там блоки в виде кнопок в ряд были, и вот, на бутстрапе 3 с его float left к примеру 1 ряд нормально на экранах узких, со второго ряда съезжать начинает правый блок, на sm экранах раз через раз нормально. Решилось только бутстрапом на флексе. Короче как на скрине примерно вот такая проблемка была, причем не на всех айфонах, точно уже не помню на 2 моделях вот так криво было, проверяли с клиентом именно на телефонах, у него сервис по ремонту телефонов был. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 25 января 2021 Поделиться Опубликовано: 25 января 2021 14 часов назад, Dimasscus сказал: возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. @320 flex-direction: column @768 flex-direction: row все. а вообще, посмотрите на codepen.io или на других ресурсах, что можно делать на флексе. и, кстати, как вы на бутстрапе расположите 5 элементов в ряд ровно, с одинаковыми расстояниями? с его 12 колоннами. на флексе можно рисовать ровные сетки из любого количества элементов, даже, если у вас в одной строке 5 штук, а во второй - 4. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Назад 1 2 Вперёд Страница 1 из 2 Создайте аккаунт или войдите в него для комментирования Вы должны быть пользователем, чтобы оставить комментарий Создать аккаунт Зарегистрируйтесь для получения аккаунта. Это просто! Зарегистрировать аккаунт Войти Уже зарегистрированы? Войдите здесь. Войти сейчас Поделиться Больше способов поделиться... Подписчики 3 Перейти к списку тем Сейчас на странице 0 пользователей Нет пользователей, просматривающих эту страницу. Последние темы Последние дополнения Последние новости Вся активность Главная Opencart 3.x Opencart 3.x: Общие вопросы Как сделать два div блока Покупцям Оплата розширень фізичними особами Оплата розширень юридичними особами Політика повернень Розробникам Регламент розміщення розширень Регламент продажу та підтримки розширень Віртуальний обліковий запис автора Політика просування оголошень API каталогу розширень Вирішення спорів щодо авторських прав Корисна інформація Публічна оферта Політика повернень Політика конфіденційності Платіжна політика Політика передачі особистих даних Політика прозорості Останні розширення Deals – адаптивный универсальный шаблон Автор: octemplates Динамичесткая инфострока в шапке + позиция в макете для opencart\ocstore 2x, 3x Автор: Lito911 Единицы Измерения Товара Автор: RoS Opencart Product Search by Image Автор: slavoglo Простой массовый редактор цен. Fast Price Edit Автор: Sha × Уже зарегистрированы? Войти Регистрация Раздел покупок Назад Приобретенные дополнения Ваши счета Список желаний Альтернативные контакты Форум Новости ocStore Назад Официальный сайт Демо ocStore 3.0.3.2 Демо ocStore 2.3.0.2.4 Скачать ocStore Документация История версий ocStore Блоги Модули Шаблоны Назад Бесплатные шаблоны Платные шаблоны Где покупать модули? Услуги FAQ OpenCart.Pro Назад Демо Купить Сравнение × Создать... Важная информация На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности. Я принимаю
semen78 Опубликовано: 23 января 2021 Автор Поделиться Опубликовано: 23 января 2021 9 минут назад, Blast сказал: <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> два блока, один над другим) А как их рядом поставить? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
colordays Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 Сделайте для ваших дивов width: 50%; float: left; Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
WIXVW Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 2 часа назад, semen78 сказал: Всем привет, помогите пожалуйста примером кода, что бы в описании к товару сделать два див блока как на картинке, и что бы при уменьшении разрешения, например меньше 700px, правый блок вставал вниз под левый. Сам что то не допетрю если по-современному делать, то так: <div class="wrapper"> <div class="div-1"></div> <div class="div-2"></div> </div> <style> .wrapper { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-direction: normal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; flex-wrap: wrap; } .wrapper > div { flex: 1 1 50%; } @media (max-width: 700px) { .wrapper > div { flex: 1 1 100%; } } </style> 2 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
SooR Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 18 минут назад, WIXVW сказал: если по-современному делать, то так: Этой современной технологии уже 7 лет с официальной поддержки браузерами. Префиксы можно убрать. Автору 2 часа назад, semen78 сказал: два блока, один над другим) А как их рядом поставить? Вам не дописали <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 19 минут назад, SooR сказал: Этой современной технологии уже 7 лет с официальной поддержки браузерами. Префиксы можно убрать. Автору Вам не дописали <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> Всегда был уверен в этом, как в том что дваждыдвачетыре... Пока не начинаешь лазить по фтп разных магазинов, в которых стили самого бутстрап переписаны столько же произвольно , сколь и глупо . И вот пишешь такому товарищу подобные примеры, а он не упоминая о своих шаловливых ручках , продолжает писать что нихрена ему такие советы не помогают.... Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SooR Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 18 минут назад, Tom сказал: Всегда был уверен в этом, как в том что дваждыдвачетыре... Пока не начинаешь лазить по фтп разных магазинов, в которых стили самого бутстрап переписаны столько же произвольно , сколь и глупо . И вот пишешь такому товарищу подобные примеры, а он не упоминая о своих шаловливых ручках , продолжает писать что нихрена ему такие советы не помогают.... Ага, bootstrap подключен, а из его стилей там только .btn в лучшем случае. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... matroskin92 Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 Без гридов как-то скучной тема будет <div class="grid"> <div class="cell">Раз</div> <div class="cell">Два</div> </div> .grid { display: grid; grid-gap: 1rem; } @media only screen and (min-width: 700px){ .grid { grid-template-columns: repeat(2, 1fr); } } .cell { text-align: center; padding: 1rem; border: 1px solid; } 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 2 часа назад, SooR сказал: Этой современной технологии уже 7 лет с официальной поддержки браузерами. Префиксы можно убрать. Автору Вам не дописали <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> может и 7 лет, но уж получше, чем бутстрап Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... HyperLabTeam Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 10 минут назад, WIXVW сказал: может и 7 лет, но уж получше, чем бутстрап смысл в этом если можно встроенное использовать Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 2 минуты назад, AWARO сказал: смысл в этом если можно встроенное использовать например, потому что бутстраповские sm, xs со своими @media max-width уже не попадают под viewport современных моделей Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 26 минут назад, WIXVW сказал: например, потому что бутстраповские sm, xs со своими @media max-width уже не попадают под viewport современных моделей Каких ? Можно примеры, очень интересно ? 2 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... matroskin92 Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 6 часов назад, Tom сказал: Каких ? Можно примеры, очень интересно 320, 360, 410 иногда бывает очень сильно нужно, но при чем тут бутстрап с его сеткой, я хз Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 2 часа назад, matroskin92 сказал: 320, 360, 410 Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 8 часов назад, Tom сказал: Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. все верно Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 А примеры будут? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 13 минут назад, WIXVW сказал: все верно и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 37 минут назад, Dimasscus сказал: и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 (изменено) 47 минут назад, Tom сказал: А примеры будут? The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px Изменено 24 января 2021 пользователем WIXVW 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 33 минуты назад, WIXVW сказал: почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. где я написал что он ваш и что именно ваш кривой? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 30 минут назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Venter Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 44 минуты назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px не вижу вообще никаких проблем с этим, если уж так надо на каком то размере экрана что то по своему то не проблема добавить свои классы со своими условиями и всунуть их в разметку. А так бутстрап уже давно есть на флексе и работает нормально. Кстати, было дело столкнулся с проблемкой именно айфон и его родной браузер, к примеру <div class="row"> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> </div> примерно вот такая разметка общая, там блоки в виде кнопок в ряд были, и вот, на бутстрапе 3 с его float left к примеру 1 ряд нормально на экранах узких, со второго ряда съезжать начинает правый блок, на sm экранах раз через раз нормально. Решилось только бутстрапом на флексе. Короче как на скрине примерно вот такая проблемка была, причем не на всех айфонах, точно уже не помню на 2 моделях вот так криво было, проверяли с клиентом именно на телефонах, у него сервис по ремонту телефонов был. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 25 января 2021 Поделиться Опубликовано: 25 января 2021 14 часов назад, Dimasscus сказал: возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. @320 flex-direction: column @768 flex-direction: row все. а вообще, посмотрите на codepen.io или на других ресурсах, что можно делать на флексе. и, кстати, как вы на бутстрапе расположите 5 элементов в ряд ровно, с одинаковыми расстояниями? с его 12 колоннами. на флексе можно рисовать ровные сетки из любого количества элементов, даже, если у вас в одной строке 5 штук, а во второй - 4. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Назад 1 2 Вперёд Страница 1 из 2 Создайте аккаунт или войдите в него для комментирования Вы должны быть пользователем, чтобы оставить комментарий Создать аккаунт Зарегистрируйтесь для получения аккаунта. Это просто! Зарегистрировать аккаунт Войти Уже зарегистрированы? Войдите здесь. Войти сейчас Поделиться Больше способов поделиться... Подписчики 3 Перейти к списку тем Сейчас на странице 0 пользователей Нет пользователей, просматривающих эту страницу. Последние темы Последние дополнения Последние новости Вся активность Главная Opencart 3.x Opencart 3.x: Общие вопросы Как сделать два div блока Покупцям Оплата розширень фізичними особами Оплата розширень юридичними особами Політика повернень Розробникам Регламент розміщення розширень Регламент продажу та підтримки розширень Віртуальний обліковий запис автора Політика просування оголошень API каталогу розширень Вирішення спорів щодо авторських прав Корисна інформація Публічна оферта Політика повернень Політика конфіденційності Платіжна політика Політика передачі особистих даних Політика прозорості Останні розширення Deals – адаптивный универсальный шаблон Автор: octemplates Динамичесткая инфострока в шапке + позиция в макете для opencart\ocstore 2x, 3x Автор: Lito911 Единицы Измерения Товара Автор: RoS Opencart Product Search by Image Автор: slavoglo Простой массовый редактор цен. Fast Price Edit Автор: Sha × Уже зарегистрированы? Войти Регистрация Раздел покупок Назад Приобретенные дополнения Ваши счета Список желаний Альтернативные контакты Форум Новости ocStore Назад Официальный сайт Демо ocStore 3.0.3.2 Демо ocStore 2.3.0.2.4 Скачать ocStore Документация История версий ocStore Блоги Модули Шаблоны Назад Бесплатные шаблоны Платные шаблоны Где покупать модули? Услуги FAQ OpenCart.Pro Назад Демо Купить Сравнение × Создать... Важная информация На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности. Я принимаю
Tom Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 19 минут назад, SooR сказал: Этой современной технологии уже 7 лет с официальной поддержки браузерами. Префиксы можно убрать. Автору Вам не дописали <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> Всегда был уверен в этом, как в том что дваждыдвачетыре... Пока не начинаешь лазить по фтп разных магазинов, в которых стили самого бутстрап переписаны столько же произвольно , сколь и глупо . И вот пишешь такому товарищу подобные примеры, а он не упоминая о своих шаловливых ручках , продолжает писать что нихрена ему такие советы не помогают.... Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... SooR Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 18 минут назад, Tom сказал: Всегда был уверен в этом, как в том что дваждыдвачетыре... Пока не начинаешь лазить по фтп разных магазинов, в которых стили самого бутстрап переписаны столько же произвольно , сколь и глупо . И вот пишешь такому товарищу подобные примеры, а он не упоминая о своих шаловливых ручках , продолжает писать что нихрена ему такие советы не помогают.... Ага, bootstrap подключен, а из его стилей там только .btn в лучшем случае. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... matroskin92 Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 Без гридов как-то скучной тема будет <div class="grid"> <div class="cell">Раз</div> <div class="cell">Два</div> </div> .grid { display: grid; grid-gap: 1rem; } @media only screen and (min-width: 700px){ .grid { grid-template-columns: repeat(2, 1fr); } } .cell { text-align: center; padding: 1rem; border: 1px solid; } 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 2 часа назад, SooR сказал: Этой современной технологии уже 7 лет с официальной поддержки браузерами. Префиксы можно убрать. Автору Вам не дописали <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> может и 7 лет, но уж получше, чем бутстрап Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... HyperLabTeam Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 10 минут назад, WIXVW сказал: может и 7 лет, но уж получше, чем бутстрап смысл в этом если можно встроенное использовать Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 2 минуты назад, AWARO сказал: смысл в этом если можно встроенное использовать например, потому что бутстраповские sm, xs со своими @media max-width уже не попадают под viewport современных моделей Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 26 минут назад, WIXVW сказал: например, потому что бутстраповские sm, xs со своими @media max-width уже не попадают под viewport современных моделей Каких ? Можно примеры, очень интересно ? 2 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... matroskin92 Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 6 часов назад, Tom сказал: Каких ? Можно примеры, очень интересно 320, 360, 410 иногда бывает очень сильно нужно, но при чем тут бутстрап с его сеткой, я хз Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 2 часа назад, matroskin92 сказал: 320, 360, 410 Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 8 часов назад, Tom сказал: Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. все верно Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 А примеры будут? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 13 минут назад, WIXVW сказал: все верно и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 37 минут назад, Dimasscus сказал: и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 (изменено) 47 минут назад, Tom сказал: А примеры будут? The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px Изменено 24 января 2021 пользователем WIXVW 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 33 минуты назад, WIXVW сказал: почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. где я написал что он ваш и что именно ваш кривой? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 30 минут назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Venter Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 44 минуты назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px не вижу вообще никаких проблем с этим, если уж так надо на каком то размере экрана что то по своему то не проблема добавить свои классы со своими условиями и всунуть их в разметку. А так бутстрап уже давно есть на флексе и работает нормально. Кстати, было дело столкнулся с проблемкой именно айфон и его родной браузер, к примеру <div class="row"> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> </div> примерно вот такая разметка общая, там блоки в виде кнопок в ряд были, и вот, на бутстрапе 3 с его float left к примеру 1 ряд нормально на экранах узких, со второго ряда съезжать начинает правый блок, на sm экранах раз через раз нормально. Решилось только бутстрапом на флексе. Короче как на скрине примерно вот такая проблемка была, причем не на всех айфонах, точно уже не помню на 2 моделях вот так криво было, проверяли с клиентом именно на телефонах, у него сервис по ремонту телефонов был. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 25 января 2021 Поделиться Опубликовано: 25 января 2021 14 часов назад, Dimasscus сказал: возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. @320 flex-direction: column @768 flex-direction: row все. а вообще, посмотрите на codepen.io или на других ресурсах, что можно делать на флексе. и, кстати, как вы на бутстрапе расположите 5 элементов в ряд ровно, с одинаковыми расстояниями? с его 12 колоннами. на флексе можно рисовать ровные сетки из любого количества элементов, даже, если у вас в одной строке 5 штук, а во второй - 4. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Назад 1 2 Вперёд Страница 1 из 2 Создайте аккаунт или войдите в него для комментирования Вы должны быть пользователем, чтобы оставить комментарий Создать аккаунт Зарегистрируйтесь для получения аккаунта. Это просто! Зарегистрировать аккаунт Войти Уже зарегистрированы? Войдите здесь. Войти сейчас Поделиться Больше способов поделиться... Подписчики 3 Перейти к списку тем Сейчас на странице 0 пользователей Нет пользователей, просматривающих эту страницу. Последние темы Последние дополнения Последние новости Вся активность Главная Opencart 3.x Opencart 3.x: Общие вопросы Как сделать два div блока Покупцям Оплата розширень фізичними особами Оплата розширень юридичними особами Політика повернень Розробникам Регламент розміщення розширень Регламент продажу та підтримки розширень Віртуальний обліковий запис автора Політика просування оголошень API каталогу розширень Вирішення спорів щодо авторських прав Корисна інформація Публічна оферта Політика повернень Політика конфіденційності Платіжна політика Політика передачі особистих даних Політика прозорості Останні розширення Deals – адаптивный универсальный шаблон Автор: octemplates Динамичесткая инфострока в шапке + позиция в макете для opencart\ocstore 2x, 3x Автор: Lito911 Единицы Измерения Товара Автор: RoS Opencart Product Search by Image Автор: slavoglo Простой массовый редактор цен. Fast Price Edit Автор: Sha × Уже зарегистрированы? Войти Регистрация Раздел покупок Назад Приобретенные дополнения Ваши счета Список желаний Альтернативные контакты Форум Новости ocStore Назад Официальный сайт Демо ocStore 3.0.3.2 Демо ocStore 2.3.0.2.4 Скачать ocStore Документация История версий ocStore Блоги Модули Шаблоны Назад Бесплатные шаблоны Платные шаблоны Где покупать модули? Услуги FAQ OpenCart.Pro Назад Демо Купить Сравнение × Создать... Важная информация На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности. Я принимаю
SooR Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 18 минут назад, Tom сказал: Всегда был уверен в этом, как в том что дваждыдвачетыре... Пока не начинаешь лазить по фтп разных магазинов, в которых стили самого бутстрап переписаны столько же произвольно , сколь и глупо . И вот пишешь такому товарищу подобные примеры, а он не упоминая о своих шаловливых ручках , продолжает писать что нихрена ему такие советы не помогают.... Ага, bootstrap подключен, а из его стилей там только .btn в лучшем случае. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... matroskin92 Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 Без гридов как-то скучной тема будет <div class="grid"> <div class="cell">Раз</div> <div class="cell">Два</div> </div> .grid { display: grid; grid-gap: 1rem; } @media only screen and (min-width: 700px){ .grid { grid-template-columns: repeat(2, 1fr); } } .cell { text-align: center; padding: 1rem; border: 1px solid; } 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 2 часа назад, SooR сказал: Этой современной технологии уже 7 лет с официальной поддержки браузерами. Префиксы можно убрать. Автору Вам не дописали <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> может и 7 лет, но уж получше, чем бутстрап Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... HyperLabTeam Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 10 минут назад, WIXVW сказал: может и 7 лет, но уж получше, чем бутстрап смысл в этом если можно встроенное использовать Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 2 минуты назад, AWARO сказал: смысл в этом если можно встроенное использовать например, потому что бутстраповские sm, xs со своими @media max-width уже не попадают под viewport современных моделей Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 26 минут назад, WIXVW сказал: например, потому что бутстраповские sm, xs со своими @media max-width уже не попадают под viewport современных моделей Каких ? Можно примеры, очень интересно ? 2 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... matroskin92 Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 6 часов назад, Tom сказал: Каких ? Можно примеры, очень интересно 320, 360, 410 иногда бывает очень сильно нужно, но при чем тут бутстрап с его сеткой, я хз Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 2 часа назад, matroskin92 сказал: 320, 360, 410 Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 8 часов назад, Tom сказал: Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. все верно Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 А примеры будут? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 13 минут назад, WIXVW сказал: все верно и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 37 минут назад, Dimasscus сказал: и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 (изменено) 47 минут назад, Tom сказал: А примеры будут? The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px Изменено 24 января 2021 пользователем WIXVW 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 33 минуты назад, WIXVW сказал: почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. где я написал что он ваш и что именно ваш кривой? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 30 минут назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Venter Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 44 минуты назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px не вижу вообще никаких проблем с этим, если уж так надо на каком то размере экрана что то по своему то не проблема добавить свои классы со своими условиями и всунуть их в разметку. А так бутстрап уже давно есть на флексе и работает нормально. Кстати, было дело столкнулся с проблемкой именно айфон и его родной браузер, к примеру <div class="row"> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> </div> примерно вот такая разметка общая, там блоки в виде кнопок в ряд были, и вот, на бутстрапе 3 с его float left к примеру 1 ряд нормально на экранах узких, со второго ряда съезжать начинает правый блок, на sm экранах раз через раз нормально. Решилось только бутстрапом на флексе. Короче как на скрине примерно вот такая проблемка была, причем не на всех айфонах, точно уже не помню на 2 моделях вот так криво было, проверяли с клиентом именно на телефонах, у него сервис по ремонту телефонов был. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 25 января 2021 Поделиться Опубликовано: 25 января 2021 14 часов назад, Dimasscus сказал: возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. @320 flex-direction: column @768 flex-direction: row все. а вообще, посмотрите на codepen.io или на других ресурсах, что можно делать на флексе. и, кстати, как вы на бутстрапе расположите 5 элементов в ряд ровно, с одинаковыми расстояниями? с его 12 колоннами. на флексе можно рисовать ровные сетки из любого количества элементов, даже, если у вас в одной строке 5 штук, а во второй - 4. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Назад 1 2 Вперёд Страница 1 из 2 Создайте аккаунт или войдите в него для комментирования Вы должны быть пользователем, чтобы оставить комментарий Создать аккаунт Зарегистрируйтесь для получения аккаунта. Это просто! Зарегистрировать аккаунт Войти Уже зарегистрированы? Войдите здесь. Войти сейчас Поделиться Больше способов поделиться... Подписчики 3 Перейти к списку тем Сейчас на странице 0 пользователей Нет пользователей, просматривающих эту страницу. Последние темы Последние дополнения Последние новости Вся активность Главная Opencart 3.x Opencart 3.x: Общие вопросы Как сделать два div блока Покупцям Оплата розширень фізичними особами Оплата розширень юридичними особами Політика повернень Розробникам Регламент розміщення розширень Регламент продажу та підтримки розширень Віртуальний обліковий запис автора Політика просування оголошень API каталогу розширень Вирішення спорів щодо авторських прав Корисна інформація Публічна оферта Політика повернень Політика конфіденційності Платіжна політика Політика передачі особистих даних Політика прозорості Останні розширення Deals – адаптивный универсальный шаблон Автор: octemplates Динамичесткая инфострока в шапке + позиция в макете для opencart\ocstore 2x, 3x Автор: Lito911 Единицы Измерения Товара Автор: RoS Opencart Product Search by Image Автор: slavoglo Простой массовый редактор цен. Fast Price Edit Автор: Sha × Уже зарегистрированы? Войти Регистрация Раздел покупок Назад Приобретенные дополнения Ваши счета Список желаний Альтернативные контакты Форум Новости ocStore Назад Официальный сайт Демо ocStore 3.0.3.2 Демо ocStore 2.3.0.2.4 Скачать ocStore Документация История версий ocStore Блоги Модули Шаблоны Назад Бесплатные шаблоны Платные шаблоны Где покупать модули? Услуги FAQ OpenCart.Pro Назад Демо Купить Сравнение × Создать... Важная информация На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности. Я принимаю
matroskin92 Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 Без гридов как-то скучной тема будет <div class="grid"> <div class="cell">Раз</div> <div class="cell">Два</div> </div> .grid { display: grid; grid-gap: 1rem; } @media only screen and (min-width: 700px){ .grid { grid-template-columns: repeat(2, 1fr); } } .cell { text-align: center; padding: 1rem; border: 1px solid; } 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 2 часа назад, SooR сказал: Этой современной технологии уже 7 лет с официальной поддержки браузерами. Префиксы можно убрать. Автору Вам не дописали <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> может и 7 лет, но уж получше, чем бутстрап Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... HyperLabTeam Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 10 минут назад, WIXVW сказал: может и 7 лет, но уж получше, чем бутстрап смысл в этом если можно встроенное использовать Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 2 минуты назад, AWARO сказал: смысл в этом если можно встроенное использовать например, потому что бутстраповские sm, xs со своими @media max-width уже не попадают под viewport современных моделей Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 26 минут назад, WIXVW сказал: например, потому что бутстраповские sm, xs со своими @media max-width уже не попадают под viewport современных моделей Каких ? Можно примеры, очень интересно ? 2 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... matroskin92 Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 6 часов назад, Tom сказал: Каких ? Можно примеры, очень интересно 320, 360, 410 иногда бывает очень сильно нужно, но при чем тут бутстрап с его сеткой, я хз Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 2 часа назад, matroskin92 сказал: 320, 360, 410 Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 8 часов назад, Tom сказал: Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. все верно Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 А примеры будут? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 13 минут назад, WIXVW сказал: все верно и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 37 минут назад, Dimasscus сказал: и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 (изменено) 47 минут назад, Tom сказал: А примеры будут? The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px Изменено 24 января 2021 пользователем WIXVW 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 33 минуты назад, WIXVW сказал: почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. где я написал что он ваш и что именно ваш кривой? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 30 минут назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Venter Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 44 минуты назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px не вижу вообще никаких проблем с этим, если уж так надо на каком то размере экрана что то по своему то не проблема добавить свои классы со своими условиями и всунуть их в разметку. А так бутстрап уже давно есть на флексе и работает нормально. Кстати, было дело столкнулся с проблемкой именно айфон и его родной браузер, к примеру <div class="row"> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> </div> примерно вот такая разметка общая, там блоки в виде кнопок в ряд были, и вот, на бутстрапе 3 с его float left к примеру 1 ряд нормально на экранах узких, со второго ряда съезжать начинает правый блок, на sm экранах раз через раз нормально. Решилось только бутстрапом на флексе. Короче как на скрине примерно вот такая проблемка была, причем не на всех айфонах, точно уже не помню на 2 моделях вот так криво было, проверяли с клиентом именно на телефонах, у него сервис по ремонту телефонов был. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 25 января 2021 Поделиться Опубликовано: 25 января 2021 14 часов назад, Dimasscus сказал: возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. @320 flex-direction: column @768 flex-direction: row все. а вообще, посмотрите на codepen.io или на других ресурсах, что можно делать на флексе. и, кстати, как вы на бутстрапе расположите 5 элементов в ряд ровно, с одинаковыми расстояниями? с его 12 колоннами. на флексе можно рисовать ровные сетки из любого количества элементов, даже, если у вас в одной строке 5 штук, а во второй - 4. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Назад 1 2 Вперёд Страница 1 из 2 Создайте аккаунт или войдите в него для комментирования Вы должны быть пользователем, чтобы оставить комментарий Создать аккаунт Зарегистрируйтесь для получения аккаунта. Это просто! Зарегистрировать аккаунт Войти Уже зарегистрированы? Войдите здесь. Войти сейчас Поделиться Больше способов поделиться... Подписчики 3 Перейти к списку тем Сейчас на странице 0 пользователей Нет пользователей, просматривающих эту страницу. Последние темы Последние дополнения Последние новости Вся активность Главная Opencart 3.x Opencart 3.x: Общие вопросы Как сделать два div блока Покупцям Оплата розширень фізичними особами Оплата розширень юридичними особами Політика повернень Розробникам Регламент розміщення розширень Регламент продажу та підтримки розширень Віртуальний обліковий запис автора Політика просування оголошень API каталогу розширень Вирішення спорів щодо авторських прав Корисна інформація Публічна оферта Політика повернень Політика конфіденційності Платіжна політика Політика передачі особистих даних Політика прозорості Останні розширення Deals – адаптивный универсальный шаблон Автор: octemplates Динамичесткая инфострока в шапке + позиция в макете для opencart\ocstore 2x, 3x Автор: Lito911 Единицы Измерения Товара Автор: RoS Opencart Product Search by Image Автор: slavoglo Простой массовый редактор цен. Fast Price Edit Автор: Sha × Уже зарегистрированы? Войти Регистрация Раздел покупок Назад Приобретенные дополнения Ваши счета Список желаний Альтернативные контакты Форум Новости ocStore Назад Официальный сайт Демо ocStore 3.0.3.2 Демо ocStore 2.3.0.2.4 Скачать ocStore Документация История версий ocStore Блоги Модули Шаблоны Назад Бесплатные шаблоны Платные шаблоны Где покупать модули? Услуги FAQ OpenCart.Pro Назад Демо Купить Сравнение × Создать... Важная информация На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности. Я принимаю
WIXVW Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 2 часа назад, SooR сказал: Этой современной технологии уже 7 лет с официальной поддержки браузерами. Префиксы можно убрать. Автору Вам не дописали <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> может и 7 лет, но уж получше, чем бутстрап Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
HyperLabTeam Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 10 минут назад, WIXVW сказал: может и 7 лет, но уж получше, чем бутстрап смысл в этом если можно встроенное использовать Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
WIXVW Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 2 минуты назад, AWARO сказал: смысл в этом если можно встроенное использовать например, потому что бутстраповские sm, xs со своими @media max-width уже не попадают под viewport современных моделей Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
Tom Опубликовано: 23 января 2021 Поделиться Опубликовано: 23 января 2021 26 минут назад, WIXVW сказал: например, потому что бутстраповские sm, xs со своими @media max-width уже не попадают под viewport современных моделей Каких ? Можно примеры, очень интересно ? 2 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... matroskin92 Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 6 часов назад, Tom сказал: Каких ? Можно примеры, очень интересно 320, 360, 410 иногда бывает очень сильно нужно, но при чем тут бутстрап с его сеткой, я хз Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 2 часа назад, matroskin92 сказал: 320, 360, 410 Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 8 часов назад, Tom сказал: Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. все верно Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 А примеры будут? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 13 минут назад, WIXVW сказал: все верно и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 37 минут назад, Dimasscus сказал: и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 (изменено) 47 минут назад, Tom сказал: А примеры будут? The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px Изменено 24 января 2021 пользователем WIXVW 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 33 минуты назад, WIXVW сказал: почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. где я написал что он ваш и что именно ваш кривой? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 30 минут назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Venter Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 44 минуты назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px не вижу вообще никаких проблем с этим, если уж так надо на каком то размере экрана что то по своему то не проблема добавить свои классы со своими условиями и всунуть их в разметку. А так бутстрап уже давно есть на флексе и работает нормально. Кстати, было дело столкнулся с проблемкой именно айфон и его родной браузер, к примеру <div class="row"> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> </div> примерно вот такая разметка общая, там блоки в виде кнопок в ряд были, и вот, на бутстрапе 3 с его float left к примеру 1 ряд нормально на экранах узких, со второго ряда съезжать начинает правый блок, на sm экранах раз через раз нормально. Решилось только бутстрапом на флексе. Короче как на скрине примерно вот такая проблемка была, причем не на всех айфонах, точно уже не помню на 2 моделях вот так криво было, проверяли с клиентом именно на телефонах, у него сервис по ремонту телефонов был. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 25 января 2021 Поделиться Опубликовано: 25 января 2021 14 часов назад, Dimasscus сказал: возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. @320 flex-direction: column @768 flex-direction: row все. а вообще, посмотрите на codepen.io или на других ресурсах, что можно делать на флексе. и, кстати, как вы на бутстрапе расположите 5 элементов в ряд ровно, с одинаковыми расстояниями? с его 12 колоннами. на флексе можно рисовать ровные сетки из любого количества элементов, даже, если у вас в одной строке 5 штук, а во второй - 4. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Назад 1 2 Вперёд Страница 1 из 2 Создайте аккаунт или войдите в него для комментирования Вы должны быть пользователем, чтобы оставить комментарий Создать аккаунт Зарегистрируйтесь для получения аккаунта. Это просто! Зарегистрировать аккаунт Войти Уже зарегистрированы? Войдите здесь. Войти сейчас Поделиться Больше способов поделиться... Подписчики 3 Перейти к списку тем Сейчас на странице 0 пользователей Нет пользователей, просматривающих эту страницу. Последние темы Последние дополнения Последние новости Вся активность Главная Opencart 3.x Opencart 3.x: Общие вопросы Как сделать два div блока Покупцям Оплата розширень фізичними особами Оплата розширень юридичними особами Політика повернень Розробникам Регламент розміщення розширень Регламент продажу та підтримки розширень Віртуальний обліковий запис автора Політика просування оголошень API каталогу розширень Вирішення спорів щодо авторських прав Корисна інформація Публічна оферта Політика повернень Політика конфіденційності Платіжна політика Політика передачі особистих даних Політика прозорості Останні розширення Deals – адаптивный универсальный шаблон Автор: octemplates Динамичесткая инфострока в шапке + позиция в макете для opencart\ocstore 2x, 3x Автор: Lito911 Единицы Измерения Товара Автор: RoS Opencart Product Search by Image Автор: slavoglo Простой массовый редактор цен. Fast Price Edit Автор: Sha × Уже зарегистрированы? Войти Регистрация Раздел покупок Назад Приобретенные дополнения Ваши счета Список желаний Альтернативные контакты Форум Новости ocStore Назад Официальный сайт Демо ocStore 3.0.3.2 Демо ocStore 2.3.0.2.4 Скачать ocStore Документация История версий ocStore Блоги Модули Шаблоны Назад Бесплатные шаблоны Платные шаблоны Где покупать модули? Услуги FAQ OpenCart.Pro Назад Демо Купить Сравнение × Создать... Важная информация На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности. Я принимаю
matroskin92 Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 6 часов назад, Tom сказал: Каких ? Можно примеры, очень интересно 320, 360, 410 иногда бывает очень сильно нужно, но при чем тут бутстрап с его сеткой, я хз Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 2 часа назад, matroskin92 сказал: 320, 360, 410 Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 8 часов назад, Tom сказал: Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. все верно Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 А примеры будут? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 13 минут назад, WIXVW сказал: все верно и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 37 минут назад, Dimasscus сказал: и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 (изменено) 47 минут назад, Tom сказал: А примеры будут? The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px Изменено 24 января 2021 пользователем WIXVW 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 33 минуты назад, WIXVW сказал: почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. где я написал что он ваш и что именно ваш кривой? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 30 минут назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Venter Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 44 минуты назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px не вижу вообще никаких проблем с этим, если уж так надо на каком то размере экрана что то по своему то не проблема добавить свои классы со своими условиями и всунуть их в разметку. А так бутстрап уже давно есть на флексе и работает нормально. Кстати, было дело столкнулся с проблемкой именно айфон и его родной браузер, к примеру <div class="row"> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> </div> примерно вот такая разметка общая, там блоки в виде кнопок в ряд были, и вот, на бутстрапе 3 с его float left к примеру 1 ряд нормально на экранах узких, со второго ряда съезжать начинает правый блок, на sm экранах раз через раз нормально. Решилось только бутстрапом на флексе. Короче как на скрине примерно вот такая проблемка была, причем не на всех айфонах, точно уже не помню на 2 моделях вот так криво было, проверяли с клиентом именно на телефонах, у него сервис по ремонту телефонов был. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 25 января 2021 Поделиться Опубликовано: 25 января 2021 14 часов назад, Dimasscus сказал: возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. @320 flex-direction: column @768 flex-direction: row все. а вообще, посмотрите на codepen.io или на других ресурсах, что можно делать на флексе. и, кстати, как вы на бутстрапе расположите 5 элементов в ряд ровно, с одинаковыми расстояниями? с его 12 колоннами. на флексе можно рисовать ровные сетки из любого количества элементов, даже, если у вас в одной строке 5 штук, а во второй - 4. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Назад 1 2 Вперёд Страница 1 из 2 Создайте аккаунт или войдите в него для комментирования Вы должны быть пользователем, чтобы оставить комментарий Создать аккаунт Зарегистрируйтесь для получения аккаунта. Это просто! Зарегистрировать аккаунт Войти Уже зарегистрированы? Войдите здесь. Войти сейчас Поделиться Больше способов поделиться... Подписчики 3 Перейти к списку тем Сейчас на странице 0 пользователей Нет пользователей, просматривающих эту страницу. Последние темы Последние дополнения Последние новости Вся активность Главная Opencart 3.x Opencart 3.x: Общие вопросы Как сделать два div блока Покупцям Оплата розширень фізичними особами Оплата розширень юридичними особами Політика повернень Розробникам Регламент розміщення розширень Регламент продажу та підтримки розширень Віртуальний обліковий запис автора Політика просування оголошень API каталогу розширень Вирішення спорів щодо авторських прав Корисна інформація Публічна оферта Політика повернень Політика конфіденційності Платіжна політика Політика передачі особистих даних Політика прозорості Останні розширення Deals – адаптивный универсальный шаблон Автор: octemplates Динамичесткая инфострока в шапке + позиция в макете для opencart\ocstore 2x, 3x Автор: Lito911 Единицы Измерения Товара Автор: RoS Opencart Product Search by Image Автор: slavoglo Простой массовый редактор цен. Fast Price Edit Автор: Sha
Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 2 часа назад, matroskin92 сказал: 320, 360, 410 Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 8 часов назад, Tom сказал: Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. все верно Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 А примеры будут? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 13 минут назад, WIXVW сказал: все верно и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 37 минут назад, Dimasscus сказал: и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 (изменено) 47 минут назад, Tom сказал: А примеры будут? The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px Изменено 24 января 2021 пользователем WIXVW 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 33 минуты назад, WIXVW сказал: почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. где я написал что он ваш и что именно ваш кривой? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 30 минут назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Venter Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 44 минуты назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px не вижу вообще никаких проблем с этим, если уж так надо на каком то размере экрана что то по своему то не проблема добавить свои классы со своими условиями и всунуть их в разметку. А так бутстрап уже давно есть на флексе и работает нормально. Кстати, было дело столкнулся с проблемкой именно айфон и его родной браузер, к примеру <div class="row"> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> </div> примерно вот такая разметка общая, там блоки в виде кнопок в ряд были, и вот, на бутстрапе 3 с его float left к примеру 1 ряд нормально на экранах узких, со второго ряда съезжать начинает правый блок, на sm экранах раз через раз нормально. Решилось только бутстрапом на флексе. Короче как на скрине примерно вот такая проблемка была, причем не на всех айфонах, точно уже не помню на 2 моделях вот так криво было, проверяли с клиентом именно на телефонах, у него сервис по ремонту телефонов был. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 25 января 2021 Поделиться Опубликовано: 25 января 2021 14 часов назад, Dimasscus сказал: возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. @320 flex-direction: column @768 flex-direction: row все. а вообще, посмотрите на codepen.io или на других ресурсах, что можно делать на флексе. и, кстати, как вы на бутстрапе расположите 5 элементов в ряд ровно, с одинаковыми расстояниями? с его 12 колоннами. на флексе можно рисовать ровные сетки из любого количества элементов, даже, если у вас в одной строке 5 штук, а во второй - 4. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Назад 1 2 Вперёд Страница 1 из 2 Создайте аккаунт или войдите в него для комментирования Вы должны быть пользователем, чтобы оставить комментарий Создать аккаунт Зарегистрируйтесь для получения аккаунта. Это просто! Зарегистрировать аккаунт Войти Уже зарегистрированы? Войдите здесь. Войти сейчас Поделиться Больше способов поделиться... Подписчики 3 Перейти к списку тем Сейчас на странице 0 пользователей Нет пользователей, просматривающих эту страницу. Последние темы Последние дополнения Последние новости Вся активность Главная Opencart 3.x Opencart 3.x: Общие вопросы Как сделать два div блока
WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 8 часов назад, Tom сказал: Если я верно мысль понял, товарищ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элементарные <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> уже не будут работать. все верно Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
Tom Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 А примеры будут? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 13 минут назад, WIXVW сказал: все верно и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 37 минут назад, Dimasscus сказал: и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 (изменено) 47 минут назад, Tom сказал: А примеры будут? The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px Изменено 24 января 2021 пользователем WIXVW 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 33 минуты назад, WIXVW сказал: почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. где я написал что он ваш и что именно ваш кривой? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 30 минут назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Venter Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 44 минуты назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px не вижу вообще никаких проблем с этим, если уж так надо на каком то размере экрана что то по своему то не проблема добавить свои классы со своими условиями и всунуть их в разметку. А так бутстрап уже давно есть на флексе и работает нормально. Кстати, было дело столкнулся с проблемкой именно айфон и его родной браузер, к примеру <div class="row"> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> </div> примерно вот такая разметка общая, там блоки в виде кнопок в ряд были, и вот, на бутстрапе 3 с его float left к примеру 1 ряд нормально на экранах узких, со второго ряда съезжать начинает правый блок, на sm экранах раз через раз нормально. Решилось только бутстрапом на флексе. Короче как на скрине примерно вот такая проблемка была, причем не на всех айфонах, точно уже не помню на 2 моделях вот так криво было, проверяли с клиентом именно на телефонах, у него сервис по ремонту телефонов был. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 25 января 2021 Поделиться Опубликовано: 25 января 2021 14 часов назад, Dimasscus сказал: возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. @320 flex-direction: column @768 flex-direction: row все. а вообще, посмотрите на codepen.io или на других ресурсах, что можно делать на флексе. и, кстати, как вы на бутстрапе расположите 5 элементов в ряд ровно, с одинаковыми расстояниями? с его 12 колоннами. на флексе можно рисовать ровные сетки из любого количества элементов, даже, если у вас в одной строке 5 штук, а во второй - 4. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Назад 1 2 Вперёд Страница 1 из 2 Создайте аккаунт или войдите в него для комментирования Вы должны быть пользователем, чтобы оставить комментарий Создать аккаунт Зарегистрируйтесь для получения аккаунта. Это просто! Зарегистрировать аккаунт Войти Уже зарегистрированы? Войдите здесь. Войти сейчас Поделиться Больше способов поделиться... Подписчики 3 Перейти к списку тем Сейчас на странице 0 пользователей Нет пользователей, просматривающих эту страницу.
Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 13 минут назад, WIXVW сказал: все верно и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 37 минут назад, Dimasscus сказал: и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :)) почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
WIXVW Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 (изменено) 47 минут назад, Tom сказал: А примеры будут? The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px Изменено 24 января 2021 пользователем WIXVW 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 33 минуты назад, WIXVW сказал: почему свой? почему кривой? и почему всунуть? пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап. где я написал что он ваш и что именно ваш кривой? Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
Dimasscus Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 30 минут назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. 1 Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
Venter Опубликовано: 24 января 2021 Поделиться Опубликовано: 24 января 2021 44 минуты назад, WIXVW сказал: The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) то есть до планшета с вьюпортом 768px вся верстка будет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшета с вьюпортом 600px. у вас либо будет вылазить за экран на маленьких телефонах, либо будет много свободного места на экранах побольше например, для сетки товаров в каталоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два поставить P.S. есть еще экраны ноутов на 1024px не вижу вообще никаких проблем с этим, если уж так надо на каком то размере экрана что то по своему то не проблема добавить свои классы со своими условиями и всунуть их в разметку. А так бутстрап уже давно есть на флексе и работает нормально. Кстати, было дело столкнулся с проблемкой именно айфон и его родной браузер, к примеру <div class="row"> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> </div> примерно вот такая разметка общая, там блоки в виде кнопок в ряд были, и вот, на бутстрапе 3 с его float left к примеру 1 ряд нормально на экранах узких, со второго ряда съезжать начинает правый блок, на sm экранах раз через раз нормально. Решилось только бутстрапом на флексе. Короче как на скрине примерно вот такая проблемка была, причем не на всех айфонах, точно уже не помню на 2 моделях вот так криво было, проверяли с клиентом именно на телефонах, у него сервис по ремонту телефонов был. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... WIXVW Опубликовано: 25 января 2021 Поделиться Опубликовано: 25 января 2021 14 часов назад, Dimasscus сказал: возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. @320 flex-direction: column @768 flex-direction: row все. а вообще, посмотрите на codepen.io или на других ресурсах, что можно делать на флексе. и, кстати, как вы на бутстрапе расположите 5 элементов в ряд ровно, с одинаковыми расстояниями? с его 12 колоннами. на флексе можно рисовать ровные сетки из любого количества элементов, даже, если у вас в одной строке 5 штук, а во второй - 4. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться... Назад 1 2 Вперёд Страница 1 из 2 Создайте аккаунт или войдите в него для комментирования Вы должны быть пользователем, чтобы оставить комментарий Создать аккаунт Зарегистрируйтесь для получения аккаунта. Это просто! Зарегистрировать аккаунт Войти Уже зарегистрированы? Войдите здесь. Войти сейчас Поделиться Больше способов поделиться... Подписчики 3
WIXVW Опубликовано: 25 января 2021 Поделиться Опубликовано: 25 января 2021 14 часов назад, Dimasscus сказал: возьмем к примеру шаблон fanes. в шапке лого, блок адреса и телефона, блок времени работы и мейла, блок корзины. а теперь покажите наглядно как на flexe который туда именно что всунут, сделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонтально? :)) чисто вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь. з.ы. на бутстрапе это сделать элементарно. без перекосов, отлавливания процентов и тд и тп. @320 flex-direction: column @768 flex-direction: row все. а вообще, посмотрите на codepen.io или на других ресурсах, что можно делать на флексе. и, кстати, как вы на бутстрапе расположите 5 элементов в ряд ровно, с одинаковыми расстояниями? с его 12 колоннами. на флексе можно рисовать ровные сетки из любого количества элементов, даже, если у вас в одной строке 5 штук, а во второй - 4. Ссылка на комментарий Поделиться на других сайтах Больше способов поделиться...
Рекомендованные сообщения