Bootstrap 3仅适用于移动设备

Question

我有一个1600px广泛的网站，我想在移动设备上做得很好。如何使用Bootstrap 3.我尝试使用col-sm-*。但是对大屏幕的影响也是因为现有站点没有按照Bootstrap网格进行编码。有没有什么办法可以在不影响大屏幕的情况下使用Bootstrap？

Answer 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。

Answer 2

我找到了一个解决方案：

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

它不是很优化，但它的工作原理。你找到了更好的东西吗？它确实错过像col-sm-0这样的类来将冒号应用到xs大小......

Answer 3

您可以创建一个jQuery函数来卸载大小为768px的Bootstrap CSS文件，并在调整为较小宽度时将其加载回来。这样，您可以使用col-xs- * only

设计移动网站，而无需触摸桌面版本

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);
}
});