twitter-bootstrap – Bootstrap 3仅用于移动

发布时间：2020-12-18 00:08:16 所属栏目：安全来源：网络整理

导读：我有一个1600像素宽的网站，我想让它很好地适合在移动设备上。我如何使用Bootstrap 3.我试图使用col-sm- *。但也影响大屏幕，因为现有网站不是按照Bootstrap网格编码。有没有什么方法，我可以使用Bootstrap而不影响大屏幕？解决方法如果你想使元素只有小型

我有一个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。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!