Bootstrap - Различные правила CSS для префикса разных сеток

Question

I строит мобильный сайт с начальной загрузкой, я хотел бы установить различные правила CSS в другой префикс сетки: Col-хз, кол-см

HTML код образец:

<header class="col-xs col-sm"> 
    Hi 
</header> 

CSS:

header.col-md{ 
    background-color:red; 
} 

header.col-sm{ 
    background-color:green; 
} 

любой совет, как сделать это правильно?

Answer 1

.col-xs, .col-sm, .col-md и .col-lg НЕ Загрузочные классы. .navbar в bootstrap - это компонент заголовка, и он уже реагирует.

Чтобы создать свои собственные классы, которые работают, как вы себе представляете, вы будете использовать свои классы внутри медиа-запросов, но .col-xs не будет внутри медиа-запроса (это предполагает, что точки останова не изменились с Bootstrap 3 .x по умолчанию):

header.col-xs {styles} 

@media (min-width:768px) { 

    header.col-sm {styles} 

} 

@media (min-width:992px) { 

    header.col-md {styles} 

} 

@media (min-width:1200px) { 

    header.col-lg {styles} 

} 

было бы лучше, так как заголовок не является именем столбца, чтобы изменить это .header-xs, .header-sm, .header-md, .header-lg. Или вы можете просто не использовать его вообще и спроектировать свой заголовок с медиа-запросами и даже не использовать класс, связанный с ним.

.header { base header styles shared by all viewport widths } 

    @media (min-width:768px) { 

     .header {styles such as floats or different from the base } 

    } 

и так далее ...

Answer 2

Вы можете попробовать использовать более конкретный селектор, как идентификатор

<header id="my-header" class="col-xs col-sm"> 
    Hi 
</header> 

CSS:

#my-header.col-md{ 
    background-color:red; 
} 

#my-header.col-sm{ 
    background-color:green; 
} 

Он должен бить селектор специфичностью Bootstrap и браузер будет использовать ваши.

Подробнее о специфике: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/