4列2列与Twitter的引导

我有4列流体布局：4列2列与Twitter的引导

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span3">A</div> 
     <div class="span3">B</div> 
     <div class="span3">C</div> 
     <div class="span3">D</div> 
    </div> 
</div> 

[ A ][ B ][ C ][ D ]

对于移动设备，自举呈现列一个下另一个，其正常工作：

[   A    ] 
[   B    ] 
[   C    ] 
[   D    ]

但对于平板电脑，我想有2 2列：

[  A  ][  B  ] 
[  C  ][  D  ]

是否有可能与BOO本身实现这一行为tstrap？

来源

2013-02-20 Emilie

没有可用的这样的功能本身，据我所知。 – Pavlo 2013-02-20 19:33:54

是的，不是原生的。我自己做了，但是重写了一些Bootstrap的CSS。你有兴趣看到它吗？ – frostyterrier 2013-02-20 23:32:23

好吧，这就是我想的:(是的，我很好奇，看你是如何做到的。:) – Emilie 2013-02-21 00:07:09

我发现Zurb基金会（http://foundation.zurb.com/docs/grid.php#threeBlockEx）提供这种功能，但我想继续使用Twitter Bootstrap。所以，我已经成功地添加自定义规则，根据该基金会采用的技术：

@media (min-width: 768px) and (max-width: 979px) { 
    .row-fluid > [class*=span]:nth-child(2n+1) { 
     clear: both; 
     margin-left: 0; 
    } 
}

来源

2013-02-22 19:04:26 Emilie

您只需覆盖对应于平板电脑的@media查询中跨度的CSS。

所以，你可以尝试这样的事：

// Tablets & small desktops only 
@media (min-width: 768px) and (max-width: 979px) { 
    [class*=span] { 
    width: 50%; 
    } 
}

当然，调整可能需要进行。由于填充和边距，宽度实际上可能不是50％。

来源

2013-02-21 15:34:31

嗯。我在CSS中尝试了这两个规则，但他们都不适合我。 BS 2.0中缺少这一点令人遗憾。我希望他们加入BS 3.0！

感谢，

来源

2013-03-08 00:19:00

添加到埃米莉的答案还需要重新设置列的宽度，

@media (min-width: 768px) and (max-width: 979px) { 
    .row-fluid > [class*=span]:nth-child(2n+1) { 
     clear: both; 
     margin-left: 0; 
    } 

    .row-fluid .span3 { 
     width: 48.61878453038674%; 
    } 
}

来源

2013-05-09 14:55:30 JonathanW

完美的作品！但是不要像我那样犯同样的错误 - 忘记在bootstrap css之后加入样式表 - 并且保存几个小时:) – Nurp 2013-08-29 16:50:55

4列2列与Twitter的引导

回答

相关问题