twitter-bootstrap – Bootstrap 3仅用于移动

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – Bootstrap 3仅用于移动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个1600像素宽的网站,我想让它很好地适合在移动设备上。我如何使用Bootstrap 3.我试图使用col-sm- *。但也影响大屏幕,因为现有网站不是按照Bootstrap网格编码。有没有什么方法,我可以使用Bootstrap而不影响大屏幕?

解决方法

如果你想使元素只有小型设备上的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

原文链接:https://www.f2er.com/bootstrap/234456.html

猜你在找的Bootstrap相关文章