Bootstrap 2 и работа с сеткой по сравнению с Bootstrap 3

Question

Я просто унаследовал проект, который, к сожалению, использует Bootstrap 2, я использую Bootstrap 3, но никогда не работал с версией 2 раньше.

Я немного поработал над различиями, и, насколько я понимаю, колонки работают с использованием span*, где * указывает количество столбцов, которые вы хотите, чтобы этот элемент охватывал.

Однако я смущен тем, как вы можете изменить это в зависимости от ваших разных точек останова?

Например, в Bootstrap 3 вы можете сделать:

col-sm-4 
col-md-8 

Как вы можете изменить элемент, как, что в Bootstrap 2?

Answer 1

Вы не можете! Система сетки bootstrap 3.x имеет предопределенные классы для разных устройств - col-xs-*, .col-sm-*, .col-md-* и .col-lg-*.

Bootstrap 2.x нет. Она имеет одну системы предопределенных классов, только для одного видового экрана:

подвесная система Bootstrap по умолчанию использует 12 столбцов, что делает для 940px широкого контейнера без чувствительных функций включены. С добавленным файлами CSS сетка адаптируется к размерам 724px и 1170px в широком диапазоне в зависимости от вашего окна просмотра. Ниже видовых экранов 767px столбцы становятся жидкостью и стек вертикально.

Для достижения такого же поведения в начальной загрузки 2.x, как 3.x вы должны include bootstrap-responsive.css, который содержит жестко закодированных .span ширины (и многое другое) для различных форматов носителей, практически такие же, как col-xs-* и т.д.:

@media (min-width: 768px) and (max-width: 979px) { 
... 
    .span3 { 
    width: 166px; 
    } 
    .span2 { 
    width: 104px; 
    } 
    .span1 { 
    width: 42px; 
    } 
... 

Таким образом, в начальной загрузки 2.x .span1 так же, как col-xs-1, .col-sm-1, .col-md-1 и .col-lg-1 в зависимости от видового экрана, , если у вас естьbootstrap-responsive.css включены.