Только один div как разрешение xs на lg

Question

Я хотел бы получить необычное поведение bootstrap и медиа-запрос.

Содержание одного div (a) должно зависеть от его ширины, а не от ширины окна браузера. В случае, если изображение (a) имеет ширину 600 пикселей и должно отображаться как XS, а контейнер должен действовать как LG.

Answer 1

Вы думаете Bootstrap неправильно.

Точка бутстрапа позволяет легко изменять поведение элементов в зависимости от ширины экрана. Например, если вы используете только сетку, все, что вы изменяете, это width самих элементов на основе width экрана.

Если вы хотите, чтобы ваш a элемент не вести себя как sm во все времена, независимо от ширины экрана (или, по крайней мере, пока он достигнет xs, например), то вы можете использовать что-то вроде:

<div class=" div-a -col-sm-6"></div> 

Это скажет bootstrap, чтобы отобразить div A с 6 столбцами, если ширина экрана больше, чем sm.

Я не уверен, что вы подразумеваете под «контейнером, чтобы действовать как LG», но я предполагаю, что вы имеете в виду, что он должен быть изменен только для экранов LG. Затем:

<div class="container-div col-LG-12 col-*-newSize"> 
    <div class=" div-a -col-sm-6"> 
    *content* 
    </div> 
    <div class="container-b-c col-*-6" 
    <div class"div-b col-*-12" 
     -content- 
    </div> 
    <div class"div-c col-*-12" 
     -content- 
    </div> 
</div> //End of container-b-c 
</div> //end of container-div 

где * - это необходимый вам размер.

Answer 2

Я понимаю, как загрузочный лоток. Однако есть новое требование, требующее такого странного поведения. Вся страница должна работать «нормально», но один div должен жестко определить «разрешение».