Bootstrap 3 только для мобильных устройств

У меня есть сайт 1600px широкий, и я хочу, чтобы это было удобно на мобильных телефонах. Как я могу сделать с Bootstrap 3. Я попытался использовать col-sm-*. но также влияет на экраны больших экранов, потому что существующий сайт не закодирован в соответствии с сеткой Bootstrap. Можно ли использовать Bootstrap без эффекта большого экрана?

Ответ 1

Если вы хотите, чтобы элементы составляли 33,3% только на небольших устройствах и ниже:

Это назад от того, для чего предназначен Bootstrap, но вы можете это сделать:

<div class="row">
    <div class="col-xs-4 col-md-12">.col-xs-4 .col-md-12</div>
    <div class="col-xs-4 col-md-12">.col-xs-4 .col-md-12</div>
    <div class="col-xs-4 col-md-12">.col-xs-4 .col-md-12</div>
</div>

Это сделает каждый элемент 33,3% шириной на небольших и дополнительных небольших устройствах, но на 100% больше на средних и больших устройствах.

JSFiddle: http://jsfiddle.net/jdwire/sggt8/embedded/result/

Если вы только хотите скрыть элементы для более мелких устройств:

Я думаю, что вы ищете классы visible-xs и/или visible-sm. Это позволит вам сделать некоторые элементы видимыми только для небольших экранных устройств.

Например, если вы хотите, чтобы элемент был видимым только для маленьких и сверхмалых устройств, сделайте следующее:

<div class="visible-xs visible-sm">You're using a fairly small device.</div>

Чтобы показать это только для больших экранов, используйте это:

<div class="hidden-xs hidden-sm">You're probably not using a phone.</div>

Подробнее см. http://getbootstrap.com/css/#responsive-utilities-classes.

Ответ 2

Я нашел решение, которое нужно сделать:

<span class="visible-sm"> your code without col </span>
<span class="visible-xs"> your code with col </span>

Он не очень оптимизирован, но он работает. Вы нашли что-то лучше? Это действительно пропускает класс, подобный col-sm-0, чтобы применить двоеточия только к размеру xs...

Ответ 3

Вы можете создать функцию jQuery для выгрузки файлов Bootstrap CSS размером 768 пикселей и загрузить его при изменении размера до меньшей ширины. Таким образом, вы можете создать мобильный сайт, не касаясь настольной версии, используя только col-xs- *

function resize() {
if ($(window).width() > 767) {
$('link[rel=stylesheet][href~="bootstrap.min.css"]').prop('disabled', true);
$('link[rel=stylesheet][href~="bootstrap-theme.min.css"]').prop('disabled', true);
}   
else {
$('link[rel=stylesheet][href~="bootstrap.min.css"]').prop('disabled', false);
$('link[rel=stylesheet][href~="bootstrap-theme.min.css"]').prop('disabled', false);
}
}

$(document).ready(function() {
$(window).resize(resize);
resize();   

if ($(window).width() > 767) {
$('link[rel=stylesheet][href~="bootstrap.min.css"]').prop('disabled', true);
$('link[rel=stylesheet][href~="bootstrap-theme.min.css"]').prop('disabled', true);
}
});