使用Twitter Bootstrap在一行中多个跨度

使用Twitter的Bootstrap标准940px流体网格响应网格我试图获得多个.span div的一个.row。使用Twitter Bootstrap在一行中多个跨度

我想在每个与页面一起生长的内部行上显示最多3个.span。所以随着更多.span的添加，他们只会被添加到.row。

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container-fluid"> 
     <div class="span4">1</span> 
     <div class="span4">2</span> 
     <div class="span4">3</span> 
     <div class="span4">4</span> <!-- wrap to a new line-->     
     <div class="span4">5</span>  
    </div> 
    </div> 
</div>

我现在面临的问题是，它封装到一个新的行span4具有继承留有余量。虽然我可以在现代浏览器中使用nth-child（）修复此问题，但它显然仍然会影响IE。

任何想法，我可以如何实现这一点？

来源

2012-02-28 mindwire22

你想做什么？你为什么不把它们放在两个单独的'.row'中？你每行只能放3个'.span4's，而且你的代码中甚至没有'div.row's。 – 2012-02-28 08:26:43

忘了提及我也希望行在某个页面宽度处捕捉到两行的每行。我看到的问题是，如果在两行上有5个span4，我将如何获得第二行的第一个span4出现在第一行的最后一个span4旁边？ – mindwire22 2012-02-28 19:20:00

我决定使用第n个子选择器删除某些.span的边距。所以，我最后的解决方法看起来喜欢这样的：

一为320像素到979px跨度为980px的

两列跨距列跨距1409px

三列1409px最多

@media (min-width: 320px) and (max-width:979px) { 
    /* one column */ 
    .row-fluid .span4 {width:100%} 
    .row-fluid .span4 {margin-left:0;} 
} 

@media (min-width: 980px) and (max-width:1409px) { 
    /* two columns, remove margin off every third span */ 
    .row-fluid .span4 {width:48.717948718%;} 
    .row-fluid .span4:nth-child(2n+3) {margin-left:0;} 
} 

@media (min-width: 1410px) { 
    /* three columns, .span4's natural width. remove margin off every 4th span */ 
    .main .span4:nth-child(3n+4) {margin-left:0;} 
}

对于IE7和8，我在CSS中将每个跨度的宽度设置为48.717948718％（因此每行两个） - 使用html5 bolierplate .oldie html类专门针对这些版本。然后，我使用Modernizr和https://gist.github.com/1333330找到的nthchild的自定义测试，并删除每个偶数跨度的边距，如果浏览器不支持第n个子选择器。

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

来源

2012-03-01 20:20:42 mindwire22

可能不是最完美的解决方案，但我只是在我的自定义样式表定义一个新的CSS类，如：

.margless{ 
    margin:0 !important; 
}

然后我把它应用到，我不希望有任何的利润元素。我用bootstrap遇到同样的事情，找不到替代解决方案。

来源

2012-02-28 07:48:54 RazorThin

谢谢！这对我很好！ – flipchart 2012-11-30 05:24:25

大把戏！有用。 – LeftyX 2013-02-20 11:59:03

你的问题指定要列自动换到下一行，而是在引导的网格系统.span s的特别设计为.row内工作，这就是网格。您的代码中完全没有使用任何.row。所以我的建议，如果你忠于电网，是有你的代码看起来是这样的：

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container-fluid"> 
     <div class="row"> 
     <div class="span4">1</div> 
     <div class="span4">2</div> 
     <div class="span4">3</div> 
     <div class="span4">4</div> <!-- wrap to a new line-->     
     <div class="span4">5</div> 
     </div> 
    </div> 
    </div> 
</div>

这里是一个的jsfiddle，显示OP的例子，另一个用于清晰度。 http://jsfiddle.net/qJ55V/5/

您必须使用.row（而不是.row-fluid）才能获得应用于每个列（跨度）的继承样式。是的，这是额外的标记，但不使用.row不幸会导致您的列混乱。

来源

2012-03-13 22:14:00 jonschlinkert

使用Twitter Bootstrap在一行中多个跨度

回答

相关问题