Как сделать загрузку col-sm- * работать на мобильных устройствах?

Question

Я работаю над проектом, который отвечает до col-sm. Мне нужно, чтобы сделать совершенным в мобильном устройстве. Поскольку весь проект уже создан, для меня практически невозможно добавить col-xs-* для мобильных устройств. Есть ли jquery/scss способ сделать col-sm работать как col-xs на мобильном телефоне.

мне нужно таблетки версии, чтобы открыть в мобильных устройствах

Answer 1

Поскольку col-sm классов (в частности, ширины) удар в от 768px, вы можете ПЕРЕОПРЕДЕЛЕНИЕ стиль Bootstrap для col-sm-х подражать col-xs behaivour для нижних видовых. Прежде всего, убедитесь, что у вас есть родительский класс в вашем проекте, который вы можете использовать в качестве родительского/дочернего селектора, поскольку просто писать стили, такие как .col-sm-* {}, будут противоречить родному стилю Bootstrap.

Допустим, ваше тело тег имеет класс «page», например, мы можем использовать @media запросы подражать, что классы Col-хз сделать ниже 767px:

@media (max-width: 767px) { 
    .page .col-sm-3 { 
    width: 25%; 
    } 
    .page .col-sm-6 { 
    width: 50%; 
    } 
    .page .col-sm-9 { 
    width: 75%; 
    } 
} 

Вы также можете использовать подстановочные знаки того же так же, как и Bootstrap:

@media (max-width: 767px) { 
    .page div[class^="col-sm-"] { 
    float: left; 
    } 
} 

Кроме того, убедитесь, что ваш пользовательский файл CSS ссылается ПОСЛЕ загрузки Bootstrap.

Answer 2

Вы всегда можете сделать несколько col-размеров в своем коде.

`<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
</div> 
<div class="row"> 
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
    <!-- Optional: clear the XS cols if their content doesn't match in height --> 
    <div class="clearfix visible-xs-block"></div> 
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
</div>` 

Вот ссылка для получения дополнительной информации: http://getbootstrap.com/css/