Как сделать что бы сетка bootstrap менялась не по признаку ширины экрана, а по контейнеру в котором она находится?

Question

[red-web]

Суть в том, что я делаю визуальный редактор html страницы.
Экран всегда 1920 шириной, В тулбаре есть переключение вида страницы xs, sm, md, lg, xl.
Все мои блоки находятся внутри div:

<div class="pagewidth">
	<div class="container">
		<div class="row">
			<div class="col-xs-6 col-sm-5 col-md-3 col-lg-2 col-xl-1">Закрываем все потребности в разработке баннеров. Четко и в срок разработаемнеобходимый комплект баннеров по ТТ с гарантией качества.Если вам не понравится - вернем деньги.</div>
			<div class="col-xs-5 col-sm-2 col-md-2 col-lg-2 col-xl-2">фыва</div>
			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">фыв фыв3</div>
			<div class="col-xs-2 col-sm-7 col-md-2 col-lg-2 col-xl-2">Привет</div>
			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-8 col-xl-2">Привет</div>
		</div>
	</div>
</div>

Меняя ширину .pagewidth колонки должны перестраиваться под расширение согласно ширине этого блока,
но в bootstrap прописано:
media (min-width: 768px) {...}
media (min-width: 992px) {...}
media (min-width: 1200px) {...}
....

Соответственно они перестраиваются согласно ширине экрана.

Как сделать что бы блоки занимали количество колонок согласно ширине родительского блока, а не ширины экрана?

Comments

[Сергей delphinpro]

Какова цель? Что за тулбар?

Answer 1

[Сергей С.]

Сетка bootstrap делит экран на 12 ячеек, это основа. Максимум что вы можете - делить каждую ячейку также на 12 и т.д. Хотите заменить основы - напишите их сами :)

Comments

[red-web]

Вы вопрос не поняли - я не меняю сетку, не меняю основу, я как раз ее и беру что бы не писать самому. Вопрос в другом.

Answer 2

[Andrew]

Так меняйте ширину .container, как хотите. тамж колонки процентно считаются
https://codepen.io/kickerock-the-decoder/pen/WLPmLV

Comments

[red-web]

Поменяется ширина колонок, но не поменяется количество колонок занимаемых блоков. Количество занимаемых блоком колонок зависит от ширины экрана media (min-width: 992px)

Answer 3

[Максим Тимофеев]

Там же есть брейкпоинты, просто переопределите их для элементов, которые являются дочерними для вашего редактора.
https://getbootstrap.com/docs/4.0/layout/grid/#gri...

Comments

[red-web]

Это не сработает. Ширина экрана то все равно останется неизменной

[Максим Тимофеев]

red-web, При старте вашего редактора, Вы можете измерить его ширину и ширину экрана, вычислить и подставить необходимые значения.

[red-web]

Максим Тимофеев, какое-то кривое решение, надо будет переписывать каждый раз css что бы это работало...

[Максим Тимофеев]

red-web, не надо, надо просто генерить 1 переменную и пересобирать файлик на 5 строк.
Если бы было другое решение - тогда конечно можно было бы поперебирать. А так за неимением - или кушать не глядя или отказываться от этой затеи.
Вообще редакторы обычно имеют полноэкранный режим и тогда нет проблем.