css – 使用Twitter Bootstrap在一行中实现多个跨度

前端之家收集整理的这篇文章主要介绍了css – 使用Twitter Bootstrap在一行中实现多个跨度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用Twitter的Bootstrap的标准940px流体网格响应网格,我试图在一个.row中获得多个.span div.

我想在每个随页面增长的内部线上显示最多3个.span.因此,随着更多.span的添加,他们只会被添加到.row中.

  1. <div class="navbar navbar-fixed-top">
  2. <div class="navbar-inner">
  3. <div class="container-fluid">
  4. <div class="span4">1</span>
  5. <div class="span4">2</span>
  6. <div class="span4">3</span>
  7. <div class="span4">4</span> <!-- wrap to a new line-->
  8. <div class="span4">5</span>
  9. </div>
  10. </div>
  11. </div>

我面临的问题是包裹到新行的span4具有继承的左边距.虽然我可以在现代浏览器中使用nth-child()解决这个问题,但它显然仍会影响IE.

我有什么想法可以达到这个目的吗?

解决方法

我决定使用nth-child选择器删除某些.span的边距.所以我的最终解决方案看起来像这样

一列跨度为320px至979px

两列跨度为980px至1409px

1409px及以上的三列跨度

  1. @media (min-width: 320px) and (max-width:979px) {
  2. /* one column */
  3. .row-fluid .span4 {width:100%}
  4. .row-fluid .span4 {margin-left:0;}
  5. }
  6.  
  7. @media (min-width: 980px) and (max-width:1409px) {
  8. /* two columns,remove margin off every third span */
  9. .row-fluid .span4 {width:48.717948718%;}
  10. .row-fluid .span4:nth-child(2n+3) {margin-left:0;}
  11. }
  12.  
  13. @media (min-width: 1410px) {
  14. /* three columns,.span4's natural width. remove margin off every 4th span */
  15. .main .span4:nth-child(3n+4) {margin-left:0;}
  16. }

对于IE7和8,我在css中将每个跨度的宽度设置为48.717948718%(因此每行两个) – 通过使用html5 bolierplate .oldie html类专门针对这些版本.然后,我使用Modernizr和在https://gist.github.com/1333330找到的nthchild自定义测试,如果浏览器不支持第n个子选择器,则删除每个偶数范围的边距.

  1. if (!Modernizr.nthchildn) {
  2. $('.span4:even').addClass('margless');
  3. }

猜你在找的CSS相关文章