Bootstrap 3 仅适用于移动设备 [英] Bootstrap 3 only for mobile

问题描述

我有一个 1600px 宽的网站，我想让它只适合移动设备.我该如何使用 Bootstrap 3.我尝试使用 col-sm-*.但也会对大屏幕产生影响，因为现有站点未按照 Bootstrap 网格进行编码.有什么方法可以在不影响大屏幕的情况下使用 Bootstrap?

解决方案

如果您希望使元素仅在小型设备上达到 33.3% 和更低:

这与 Bootstrap 的设计背道而驰，但您可以这样做:

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

这将使每个元素在小型和超小型设备上宽 33.3%，但在中型和大型设备上宽 100%.

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

如果您只想为较小的设备隐藏元素:

我认为您正在寻找 visible-xs 和/或 visible-sm 类.这些可以让您使某些元素仅对小屏幕设备可见.

例如，如果您希望某个元素仅对小型和超小型设备可见，请执行以下操作:

<div class="visible-xs visible-sm">您使用的是相当小的设备.</div>

要仅在较大屏幕上显示，请使用:

<div class="hidden-xs hidden-sm">您可能没有使用手机.</div>

请参阅 http://getbootstrap.com/css/#responsive-utilities-classes 了解更多信息.

I have a site 1600px wide and I want to make that fit nicely on mobile only. How can I do with Bootstrap 3. I tried to use col-sm-*. but also effects on larges screens because existing site is not coded as per Bootstrap grid. Is there any way I can use Bootstrap without effecting large screen?

解决方案

If you're looking to make the elements be 33.3% only on small devices and lower:

This is backwards from what Bootstrap is designed for, but you can do this:

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

This will make each element 33.3% wide on small and extra small devices but 100% wide on medium and larger devices.

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

If you're only looking to hide elements for smaller devices:

I think you're looking for the visible-xs and/or visible-sm classes. These will let you make certain elements only visible to small screen devices.

For example, if you want a element to only be visible to small and extra-small devices, do this:

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

To show it only for larger screens, use this:

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

See http://getbootstrap.com/css/#responsive-utilities-classes for more information.

这篇关于Bootstrap 3 仅适用于移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！