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 函数来卸载大小为 768 像素的 Bootstrap CSS 文件，并在调整为较小宽度时将其加载回来。这样你就可以在不接触桌面版本的情况下设计一个移动网站，只使用 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);
}
});