Как сверстать бутстрапом блоки адаптивно под такую хотелку ? / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

18 сообщений из 18, страница 1 из 1

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39463373

IApple

Гость

На широком девайсе блоки должны располагаться так:
------ ----------
| || |
| A || B |
| || |
| ||---------|
| || |
| || C |
| || |
------ ----------

В мобильном блок А должен встать между В и С так:
-------
| B |
-------
| A |
-------
| C |
-------

...

Рейтинг:

0 / 0

31.05.2017, 21:50

| Ответить | Цитировать | Написать

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39463374

IApple

Гость

Сори, с пробелами оказия вышла...
На широком девайсе блоки должны располагаться так:
---- ----
|***||***|
|*A*||*B*|
|***||***|
|***||----|
|***||***|
|***||*C*|
|***||***|
---- ----
В мобильном блок А должен встать между В и С так:
----
|*B*|
----
|*A*|
----
|*C*|
----

...

Рейтинг:

0 / 0

31.05.2017, 21:57

| Ответить | Цитировать | Написать

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39463380

Antonariy

Участник

Откуда: ☭

Сообщения: 80 221

Рейтинг: 0 / 0

IAppleНа широком девайсе блоки должны располагаться так:

Код: plaintext

1.
2.
3.
4.
5.
6.
7.
8.

 ------  ----------
|        ||             |
|   A   ||      B     |
|        ||             |
|        ||---------|
|        ||             |
|        ||      C     |
|        ||             |
 ------  ----------

В мобильном блок А должен встать между В и С так:

Код: plaintext

1.
2.
3.
4.
5.
6.
7.

 -------
|    B    |
 -------
|    A    |
 -------
|    C    |
 -------

тег FIXED спасает. но считать пробелы таки уметь нужно.

...

Рейтинг:

0 / 0

31.05.2017, 22:14

| Ответить | Цитировать | Написать

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39463383

Antonariy

Участник

Откуда: ☭

Сообщения: 80 221

Рейтинг: 0 / 0

Так с бутстрапом не выйдет, во втором варианте B не может быть выше A, потому что для реализации первого варианта блоки должны идти в таком порядке:

<div>a</div>
<div>b</div>
<div>c</div>

Нужно будет лепить собственный стилевой костыль.

Для понимания: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

...

Рейтинг:

0 / 0

31.05.2017, 22:25

| Ответить | Цитировать | Написать

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39463387

Antonariy

Участник

Откуда: ☭

Сообщения: 80 221

Рейтинг: 0 / 0

А лучше сверстать такую хотелку вообще без бутстрапа, чтобы не вылезали внезапно бутсраповские правила, конфликтующие с костылем.

...

Рейтинг:

0 / 0

31.05.2017, 22:27

| Ответить | Цитировать | Написать

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39463512

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

AntonariyТак с бутстрапом не выйдет, во втором варианте B не может быть выше A, потому что для реализации первого варианта блоки должны идти в таком порядке:

Код: html

1.
2.
3.

<div>a</div>
<div>b</div>
<div>c</div>

Я с бутстрапом дело не имел... Но таки блоки можно менять местами используя новомодний ЦСС.

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#box {
	display: flex;
	flex-direction: column;
}
#a {
	order: 1;
}
#b {
	order: 0;
}
#c {
	order: 2;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id='box'>
	<div id='a'>a</div>
	<div id='b'>b</div>
	<div id='c'>c</div>
</div>
</body>
</html>

...

Рейтинг:

0 / 0

01.06.2017, 08:34

| Ответить | Цитировать | Написать

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39463535

Antonariy

Участник

Откуда: ☭

Сообщения: 80 221

Рейтинг: 0 / 0

krvsaAntonariyТак с бутстрапом не выйдет, во втором варианте B не может быть выше A, потому что для реализации первого варианта блоки должны идти в таком порядке:

Код: html

1.
2.
3.

<div>a</div>
<div>b</div>
<div>c</div>

Я с бутстрапом дело не имел... Но таки блоки можно менять местами используя новомодний ЦСС. я об этом и говорю, проще сделать без бутстрапа.

...

Рейтинг:

0 / 0

01.06.2017, 09:17

| Ответить | Цитировать | Написать

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39463589

hVostt

Участник

Сообщения: 18 899

Рейтинг: 0 / 0

Antonariyя об этом и говорю, проще сделать без бутстрапа.

На бутстрапе для этой задачи вообще CSS писать не надо, всё там решается, при чём примеры есть в доке, просто кому-то лень их читать.

...

Рейтинг:

0 / 0

01.06.2017, 10:25

| Ответить | Цитировать | Написать

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39463709

Antonariy

Участник

Откуда: ☭

Сообщения: 80 221

Рейтинг: 0 / 0

hVosttAntonariyя об этом и говорю, проще сделать без бутстрапа.

На бутстрапе для этой задачи вообще CSS писать не надо, всё там решается, при чём примеры есть в доке, просто кому-то лень их читать.Да ладно? И как ты бутстрапом превратишь
abс в bac?

...

Рейтинг:

0 / 0

01.06.2017, 11:56

| Ответить | Цитировать | Написать

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39463718

hVostt

Участник

Сообщения: 18 899

Рейтинг: 0 / 0

AntonariyДа ладно? И как ты бутстрапом превратишь
abс в bac?

http://getbootstrap.com/css/#grid-column-ordering

Читай раздел Column Ordering. Если всё равно непонятно, поясняю, ты можешь сделать BAC для мобильных и расположить как ABC для монитора. В итоге задача решится без единой строчки кода на CSS.

...

Рейтинг:

0 / 0

01.06.2017, 12:02

| Ответить | Цитировать | Написать

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39463737

вадя

Участник

Откуда: Екатеринбург

Сообщения: 19 399

Рейтинг: 0 / 0

hVosttВ итоге задача решится без единой строчки кода на CSS.
ага, только эти строчки появятся в браузере

...

Рейтинг:

0 / 0

01.06.2017, 12:19

| Ответить | Цитировать | Написать

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39463750

hVostt

Участник

Сообщения: 18 899

Рейтинг: 0 / 0

вадяага, только эти строчки появятся в браузере

Ты о чём? Какие строчки?

...

Рейтинг:

0 / 0

01.06.2017, 12:42

| Ответить | Цитировать | Написать

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39463767

Antonariy

Участник

Откуда: ☭

Сообщения: 80 221

Рейтинг: 0 / 0

hVosttAntonariyДа ладно? И как ты бутстрапом превратишь
abс в bac?

http://getbootstrap.com/css/#grid-column-ordering

Читай раздел Column Ordering. Если всё равно непонятно, поясняю, ты можешь сделать BAC для мобильных и расположить как ABC для монитора. В итоге задача решится без единой строчки кода на CSS.Ясно, я по привычке документацию по третьему бутстрапу читал, там нет col-push/pull

...

Рейтинг:

0 / 0

01.06.2017, 13:02

| Ответить | Цитировать | Написать

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39463769

Antonariy

Участник

Откуда: ☭

Сообщения: 80 221

Рейтинг: 0 / 0

На tutorialrepublic клевые доки, но пятого бутстрапа там нет :(

...

Рейтинг:

0 / 0

01.06.2017, 13:03

| Ответить | Цитировать | Написать

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39463797

hVostt

Участник

Сообщения: 18 899

Рейтинг: 0 / 0

AntonariyЯсно, я по привычке документацию по третьему бутстрапу читал, там нет col-push/pull

Вообще-то это и есть документация по 3-му бутстрапу

Дока по 4-му находится здесь: https://v4-alpha.getbootstrap.com/

...

Рейтинг:

0 / 0

01.06.2017, 13:28

| Ответить | Цитировать | Написать

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39463798

hVostt

Участник

Сообщения: 18 899

Рейтинг: 0 / 0

Antonariyпятого бутстрапа там нет

А где он есть?

...

Рейтинг:

0 / 0

01.06.2017, 13:29

| Ответить | Цитировать | Написать

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39463820

Antonariy

Участник

Откуда: ☭

Сообщения: 80 221

Рейтинг: 0 / 0

hVosttAntonariyЯсно, я по привычке документацию по третьему бутстрапу читал, там нет col-push/pull

Вообще-то это и есть документация по 3-му бутстрапу

Дока по 4-му находится здесь: https://v4-alpha.getbootstrap.com/ значит просто там нет инфы про push/pull

hVosttА где он есть?ээээ... не знаю с какого потолка я пятую версию срисовал :)
наверное перепутал с пятой версией чего-то другого, что скрещивал с бутстрапом.

...

Рейтинг:

0 / 0

01.06.2017, 13:59

| Ответить | Цитировать | Написать

Как сверстать бутстрапом блоки адаптивно под такую хотелку ?

#39466552

IApple

Гость

hVostt, спасибо, нашел тынц

...

Рейтинг:

0 / 0

06.06.2017, 11:30

| Ответить | Цитировать | Написать

18 сообщений из 18, страница 1 из 1

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&msg=39463380&tid=1444594]:	0ms
get settings:	8ms
get forum list:	14ms
check forum access:	5ms
check topic access:	5ms
track hit:	171ms
get topic data:	12ms
get forum data:	3ms
get page messages:	52ms
get tp. blocked users:	1ms
others:	14ms

total:	285ms