twitter-bootstrap - 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了解更多信息。