Twitter Bootstrap mobile only列

是否可以在Boostrap中制作'仅移动'列？即一行4在较小的屏幕上变成一行2（3 * span4s变成2 * span6？）。我知道你可以通过添加.hidden-phone来隐藏移动元素。Twitter Bootstrap mobile only列

Zurb基金会有phone-two等这样做的类。 http://www.zurb.com/article/859/fancy-mobile-layouts-with-the-foundation-

我需要编写自己的媒体查询来做到这一点吗？

来源

2013-03-25 timhc22

媒体查询不会真正帮助你，因为你在谈论改变HTML而不是简单地通过CSS改变HTML样式。您可以使用上面提到的Bootstraps“隐藏”类来隐藏较大设备上的一些内容并将其显示在较小的设备上，但这意味着这两组内容将被下载并显示或隐藏。 – 2013-03-25 13:11:48

事情是基础有'电话二'，我想知道引导程序是否有类似的东西：http://www.zurb.com/article/859/fancy-mobile-layouts-with-the-foundation- – timhc22 2013-03-25 13:56:44

Bootstrap没有内置的与您所询问的类相同的内容。

这里有一个想法，让你开始，如果你想编写自己的：http://jsfiddle.net/panchroma/g6PRS/

CSS

@media (max-width: 767px) { 
.row-fluid.phone-two .span3 { 
width: 48%; 
margin-left: 4%; 
float:left; 
} 
.row-fluid.phone-two > .span3:nth-child(odd){ 
margin-left: 0; 
} 
}

HTML

<div class="container"> 
<div class="row-fluid phone-two"> 
<div class="span3"> 
    span3 
</div> 
<div class="span3"> 
    span3 
</div> 
    <div class="span3"> 
    phone-two span3 
</div> 
    <div class="span3"> 
    span3 
</div> 
</div> 
</div>

希望这是足够多的获得你去！

来源

2013-03-25 15:43:36

谢谢你会给它一个去！ – timhc22 2013-03-27 15:11:31

快速更新引导程序3现在支持您想要在此处执行的操作。

e.g

<div class='row'> 
    <div class='col-xs-3 col-md-6'> 
    </div> 

    <div class='col-xs-3 col-md-6'> 
    </div> 

    <div class='col-xs-3 col-md-6'> 
    </div> 

    <div class='col-xs-3 col-md-6'> 
    </div> 
</div>

还没有测试这一点，但应该工作。应在移动设备上显示2列，在桌面上显示4列。更多信息http://getbootstrap.com/css/#grid

来源

2013-12-11 08:59:34

Twitter Bootstrap mobile only列

回答

相关问题