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.

Answer 2

我找到了一个解决方案:

<span class="visible-sm"> your code without col </span>
<span class="visible-xs"> your code with col </span>

它不是很优化,但它的工作原理.你找到了更好的东西吗？它确实错过像col-sm-0这样的类来将冒号应用到xs大小......