Bootstrap - система сетки

T
На сайте с 19.03.2012
Offline
24
958

Здравствуйте дорогие форумчане, нужна ваша помощь, не могу разобраться с сеткой в бутстрапе.

Есть простая HTML страничка, в ней 8 блоков.

Каким способом сделать так, чтобы при просмотре на устройствах у которых расширение меньше N-px отображалось N-количество блоков.

240px = 1 блок

320px = 2 блока

480px = 2 блока

768px = 3 блока

1024px = 4 блока

1200px = 5 блоков

P.S. Теперь сетка работает так

240px = 1

320px = 1

480px = 1

768px = 4

1024px = 5

1200px = 5

Прописано в блоках так

<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1">
[Удален]
#1

Там только 4 брейкпоинта с конкретными значениями px, но можно попробовать кастомизировать сетку:

http://getbootstrap.com/customize/#media-queries-breakpoints

igor3310
На сайте с 27.02.2011
Offline
156
#2

Или php получаем размер и по условию налету проставляем css class

Веб разработка WordPress, OpenCart, Modx Revo и прочее - https://searchengines.guru/ru/forum/1040224
T
На сайте с 19.03.2012
Offline
24
#3
web2033:
Там только 4 брейкпоинта с конкретными значениями px, но можно попробовать кастомизировать сетку:
http://getbootstrap.com/customize/#media-queries-breakpoints

Не подскажите как правильно кастомизировать?

Если можно только 4 разных значения, подскажите как правильно сделать?

240px = 1 блок

--

320px = 2 блока

480px = 2 блока

--

768px = 4 блока

1024px = 4 блока

--

1200px = 5 блоков

---------- Добавлено 28.04.2015 в 20:27 ----------

igor3310:
Или php получаем размер и по условию налету проставляем css class

php мне не совсем подойдет, там нету php сервера, только html+css+js

Но все равно скажите как можно сделать это через php

Заранее большое спасибо!

[Удален]
#4

Попробуй так http://getbootstrap.com/customize/?id=e8d8e59bfdffcf7d4903

только колонок теперь 20, чтобы делилось нацело на 5, 4 и 2 соответственно

что-то типа

<div class="col-xs-20 col-sm-10 col-md-5 col-lg-4">

в таком случае

T
На сайте с 19.03.2012
Offline
24
#5
web2033:
Попробуй так http://getbootstrap.com/customize/?id=e8d8e59bfdffcf7d4903
только колонок теперь 20, чтобы делилось нацело на 5, 4 и 2 соответственно

что-то типа
<div class="col-xs-20 col-sm-10 col-md-5 col-lg-4">


в таком случае

Сделал так как вы написали, получилось, но не совсем так как должно быть.

Теперь сетка работает так.

240 - 1 блок

320 - 1 блок

--

480 - 2 блока

768 - 2 блока

--

1024 - 4 блока

1200 - 5 блоков

Должно быть так

240px = 1 блок

--

320px = 2 блока

480px = 2 блока

--

768px = 4 блока

1024px = 4 блока

--

1200px = 5 блоков

---------- Добавлено 07.05.2015 в 02:26 ----------

Все-же решил сделать такие изменения.

< 240 - 320 = 1 блок (XS)

< 480 - 768 = 2 блока (SM)

< 1024 = 3 блока (MD)

> 1200 = 4 блока (LG)

Как сделать, чтобы так было?

T
На сайте с 19.03.2012
Offline
24
#6

На правах АППа :)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий