Класс.span* в шаблонах на Bootstrap 2

  • 3 Ответов
  • 1319 Просмотров

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

*

Оффлайн Deneb

Народ, помогите разобраться с классом .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

Re: Класс.span* в шаблонах на Bootstrap 2
« Ответ #1 : 25.03.2015, 21: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, 21:59:46 от ShfVD »

*

Оффлайн Deneb

Re: Класс.span* в шаблонах на Bootstrap 2
« Ответ #2 : 26.03.2015, 13: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

Re: Класс.span* в шаблонах на Bootstrap 2
« Ответ #3 : 29.03.2015, 17: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 (что более правильно - не слетит после обновлений) либо дописать в любой имеющийся.