Как изменить столбцы начальной загрузки при изменении размера экрана?

Я хочу изменить один из моих столбцов number при изменении размера экрана до md (ширина 1024 пикселей).Как изменить столбцы начальной загрузки при изменении размера экрана?

Что-то вроде этого:

[.col-md-2][.col-md-8][.col-md-2] становится [hidden][.col-md-12][hidden]

Мой текущий код:

<div class="col-md-2 hidden-md"></div> 
    <div class="col-md-8"></div> 
    <div class="col-md-2 hidden-md"></div>

Как изменить <div class="col-md-8"></div> к <div class="col-md-12"></div> на изменение размера?

источник

2015-05-26 Edgar

Почему? 'media query' - мое предложение. – CENT1PEDE

Im пытается избежать пользовательских запросов @media, потому что я думаю, что этого можно добиться, просто используя классы начальной загрузки. – Edgar

Попробуйте ввести код. это расширит средний столбец на устройствах малого экрана.

<div class="col-md-2 hidden-sm"></div> 
<div class="col-md-8 col-sm-12"></div> 
<div class="col-md-2 hidden-sm"></div>

, но убедитесь, что ваш загрузчик должен быть настроен и @screen-sm должна начинаться с 1024 для этого

Если нет, то вам нужно будет добавлять пользовательские CSS для разрешения 1024 с помощью средств массовой информации запросов

col-md-8 { 
    width: 100%; 
} 
col-md-2 { 
    display: none; 
}

источник

2015-05-26 10:05:05

Попробуйте следующее: Updated Demo

<div class="col-lg-2 hidden-md"></div> 
<div class="col-sm-12"></div> 
<div class="col-lg-2 hidden-md"></div>

Для Reference 1reference 2

источник

2015-05-26 10:14:35

Это не скроет первый и последний divs на размер MD, и он не сделает средний размер div 12 на размер MD. – Edgar

обновил мой ответ. Тогда в вашем вопросе вы должны упомянуть только для col-lg, но не в col-md –

Попробуйте использовать @media следующим образом:

@media screen and (min-width:1024px){ 
    .hidden-md{ 
    display:none; 
} 
    }

Надеется, что это помогает.

источник

2015-05-26 10:22:45

Я пытаюсь избежать использования настраиваемого @media, я думаю, что это можно сделать, просто используя классы начальной загрузки. – Edgar

Я нашел ответ на этот вопрос через некоторое время, его действительно просто и не требует каких-либо специальных @media css или каких-либо пользовательских кодов CSS. Hers HTML-:

<div class="col-xs-0 col-sm-0 col-md-0 col-lg-2"></div> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8"></div> <div class="col-xs-0 col-sm-0 col-md-0 col-lg-2"></div>

первый и третий столбец становится 'невидимым' на 'MD' размер и 2-й колонке становится полный размер (12)

источник

2015-05-26 11:03:40 Edgar

Как изменить столбцы начальной загрузки при изменении размера экрана?

ответ

Смежные вопросы