1

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

Например при ширине 1200рх у нас колонки разбиты поровну:

<div class="col-md-6"></div>
<div class="col-md-6"></div>

А при ширине меньше 768px нужно первую колонку увеличить за счет уменьшения второй:

<div class="col-md-9"></div>
<div class="col-md-3"></div>

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 4 мая 2016 в 6:28

2 ответа 2

1

Бутстрап предлагает набор классов для разной ширины экрана. Их названия отличается сердцевиной. Для ширины экрана менее 768px - это xs. Для ширины 768px и более - sm. Для ширина от 1200 пикселей - lg.

Условие, заданное для узкого экрана, продолжает выполняться, пока его не перебьёт условие для более широкого экрана. Если написать

<div class="col-xs-9 col-lg-6"></div>
<div class="col-xs-3 col-lg-6"></div>

то колонки будут равны только на экранах от 1200px и шире. А если сделать так

<div class="col-xs-9 col-sm-6"></div>
<div class="col-xs-3 col-sm-6"></div>

то колонки сравняются уже на 768px.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xs-9 col-lg-6" style="background:red; height:32px;"></div>
    <div class="col-xs-3 col-lg-6" style="background:blue; height:32px;"></div>
  </div>

  <div class="row">
    <div class="col-xs-9 col-sm-6" style="background:green; height:32px;"></div>
    <div class="col-xs-3 col-sm-6" style="background:yellow; height:32px;"></div>
  </div>
</div>

0

Всё уже готово в бутсрапе.

<!--
col-lg-* - больше 1200px
col-md-* - больше 992px
col-sm-* - больше 768px
col-xs-* - меньше 768px
-->

<div class="col-md-6 col-xs-9"></div>
<div class="col-md-6 col-xs-3"></div>

Официальная документация http://getbootstrap.com/css/#grid-options

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.