Bootstrap 3只适用于手机
我有一个1600px宽的网站，我想只适合在手机上使用。 我如何使用Bootstrap 3.我试图使用col-sm-* 。 但也影响大屏幕，因为现有的网站没有按照Bootstrap网格编码。 有什么办法可以使用Bootstrap而不影响大屏幕？
如果您希望仅在小型设备上使元素为33.3％
这与Bootstrap的devise背道而驰 ，但您可以这样做：
<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 。
我发现了一个解决scheme是：
<span class="visible-sm"> your code without col </span> <span class="visible-xs"> your code with col </span>
这不是很优化，但它的工作原理。 你有没有find更好的？ 它真的错过了像col-sm-0这样的类来将冒号应用到xs大小。
您可以创build一个jQuery函数来卸载768px大小的Bootstrap CSS文件，并在调整为较小宽度时将其加载回去。 这样，您可以通过仅使用col-xs- *来devise移动网站，而无需触摸桌面版本
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); } });
