0 Пользователей и 1 Гость просматривают эту тему.
  • 3 Ответов
  • 2293 Просмотров
*

Deneb

  • Осваиваюсь на форуме
  • 19
  • 0 / 0
Народ, помогите разобраться с классом .span* в В2. Не совсем понимаю как с помощью него менять размеры блоков под конкретную ширину экрана. Если в B3 есть возможность для одного блока задать несколько соответствующих стилей (например: col-lg-8 col-md-6 col-sm-3) что позволяет для разных ширин экрана задавать разную ширину блока, то как это работает в В2 со .span*? Поясню, в контексте чего я задаю вопрос. У меня есть два шаблона на В2, с практически одинаковой кодировкой HTML скелетных файлов:
шаблон 1 код

шаблон 2 код


Но первый шаблон при максимальном сужении под размер телефона, оставляет блоки компонента с картинками в две колонки (по аналогии В3 col-xs-6 col-xs-6):
шаблон 1

а второй располагает картинки компонента в ряд (по аналогии В3 col-xs-12):
шаблон 2


Мне нужно в первом шаблоне при мобильном размере, чтобы блоки картинок вставали в ряд, как во втором шаблоне. Полазил в CSS, посравнивал, но кода много и пока не знаю за что зацепится, поскольку не пойму как .span* в В2 работает с разными размерами. Русскую локализацию В2 почитал, но ответа не нашел. Кто в курсе, подскажите будьте добры.
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Re: Класс.span* в шаблонах на Bootstrap 2
« Ответ #1 : 25.03.2015, 19:31:23 »
В первом шаблоне класс ров-флуид (резиновый) во втором ров
http://bit.ly/1Gm2M8H
http://bit.ly/1Gm37YM
или наоборот, - почитай сетку бутстроап2
http://bootstrap-ru.com/scaffolding.php#gridSystem
Цитировать
не пойму как .span* в В2 работает с разными размерами.
В классе class="row" .span* задан в рх, в class="row-fluid" в %
Спойлер
[свернуть]
Спойлер
[свернуть]
Спойлер
[свернуть]
Цитировать
Мне нужно в первом шаблоне при мобильном размере, чтобы блоки картинок вставали в ряд, как во втором шаблоне. Полазил в CSS, посравнивал, но кода много и пока не знаю за что зацепится, поскольку не пойму как .span* в В2 работает с разными размерами
"Резиновый макет вписывает сетку в размер экрана, потому и 2 колонки (float: left;),
т.е. при адаптивной верстке (как раз не резиновой) в зависимости от размера экрана вступают медиазапросы @media, вот они то и отменяют float: left;
Впрочем в бутстрап это все учтено
Спойлер
[свернуть]
« Последнее редактирование: 25.03.2015, 19:59:46 от ShfVD »
*

Deneb

  • Осваиваюсь на форуме
  • 19
  • 0 / 0
Re: Класс.span* в шаблонах на Bootstrap 2
« Ответ #2 : 26.03.2015, 11:56:52 »
ShfVD
Цитировать
В первом шаблоне класс ров-флуид (резиновый) во втором ров
http://bit.ly/1Gm2M8H
http://bit.ly/1Gm37YM
или наоборот, - почитай сетку бутстроап2
http://bootstrap-ru.com/scaffolding.php#gridSystem
В обоих шаблонах spanы обернуты в строковые классы .row-fluid которые судя по документации должны обеспечивать обтекаемость, span 6 означает что они должны стоять в две колонки, и только при уменьшении менее определенной ширины у второго шаблона срабатывает настроенный @медиа запрос, у первого нет. Класс .row там есть, но не в строке а в обертке всего компонента второго шаблона, который как раз работает как надо. У первого шаблона на компоненте стоит класс .grid-block, не знаю что это за класс.
Цитировать
В классе class="row" .span* задан в рх, в class="row-fluid" в %
Не совсем понял, если class="row" .span* задан в рх, то при уменьшении ширины блок с этим классом должен по идее оставаться одного размера а не изменяться пропорционально изменениям размера окна. Если имеется в виду (full-width) по аналогии с классом .container-fluid в В3, то тут да ширина в рх и при изменении ширины окна появляется прокрутка снизу окна браузера для просмотра всей страницы. Но тут оба шаблона адаптивные, у первого видимо просто не настроены @медиа запросы.
Цитировать
"Резиновый макет вписывает сетку в размер экрана, потому и 2 колонки (float: left;),
т.е. при адаптивной верстке (как раз не резиновой) в зависимости от размера экрана вступают медиазапросы @media, вот они то и отменяют float: left;[/quot
В каком конкретно файле можно подключить @медиа запросы, не подскажите, там они в нескольких файлах фигурируют? Я так предполагаю если прописать для .span @медиа запрос для (max-width: 767px) с параметром width: 100%, то при ширине менее 767px блоки должны будут складываться из двух столбиков в два ряда.
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Re: Класс.span* в шаблонах на Bootstrap 2
« Ответ #3 : 29.03.2015, 15:18:47 »
Цитировать
Я так предполагаю если прописать для .span @медиа запрос для (max-width: 767px) с параметром width: 100%, то при ширине менее 767px блоки должны будут складываться из двух столбиков в два ряда.
Используя Bootstrap2 так и есть ( ничено е нужно прописывать - см. под 3-м спойлером) - ширина все span
Код: css
     float: none; /* в стролбик */
    display: block;
    width: 100%;
Цитировать
Не совсем понял, если class="row" .span* задан в рх, то при уменьшении ширины блок с этим классом должен по идее оставаться одного размера а не изменяться пропорционально изменениям размера окна.
так и есть, но у Вас class="row-fluid" - на больших экранах работает как резиновый (в % сжимается/растягивается) а когда меньше 767рх
срабатывает@media (max-width: 767px). В полном Bootstrap.сss правило начиная со строки 5293.
Цитировать
у первого видимо просто не настроены @медиа запросы.
Скорее всего их просто нет ни в одном из CSS. Остается скопировать и добавить либо свой CSS (что более правильно - не слетит после обновлений) либо дописать в любой имеющийся.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Различные условия в шаблонах Joomla 3.0 и 2.5

Автор Fedor Vlasenko

Ответов: 132
Просмотров: 24355
Последний ответ 24.01.2023, 17:46:38
от goga_pgasovav
Как убрать из URL знак решётка, меню Bootstrap?

Автор leo78

Ответов: 1
Просмотров: 521
Последний ответ 14.05.2021, 11:43:07
от leo78
[Решено] CSS-класс заголовка модуля

Автор schel4ok

Ответов: 36
Просмотров: 16985
Последний ответ 06.04.2021, 23:35:20
от Wak
Конфликт jQuery tabs в шаблонах Vina

Автор heartlink

Ответов: 3
Просмотров: 883
Последний ответ 04.07.2020, 21:33:53
от heartlink
Как вызвать стандартную форму обратной связи в модальном окне bootstrap 3?

Автор Konstantin124

Ответов: 10
Просмотров: 4960
Последний ответ 23.04.2019, 05:49:18
от RTEagle