带Twitter引导程序的1/3列

我使用Twitter Bootstrap 2.0创建了一个自定义网格，并且试图找出如何更新网格以允许使用1/3和1/2列。带Twitter引导程序的1/3列

它看起来像1.0你可以只使用：

<div class="span-one-third"></div>

有没有人能想出一个办法做2.0类似的东西，还是我忽视的东西？

由于

来源

2012-04-19 C Dog

对于较新的版本（因为V2），只需使用span4或COL-XX-4列，因为它是一个12列的网格。

对于引导2：

<div class="span4"></div>

对于引导3（例如）：

<div class="col-sm-4"></div>

ORIGINAL和过时的答案

只是为了清楚，这个答案是维持与使用Bootstrap v1的HTML应用程序的兼容性，该应用程序没有任何响应的内容，并且网格为16列ns（当他们改变这种情况时，已经使用v1的一些项目开始使用新版本的v2版本，开销16列）。而且他们实际上拥有.span-three-class等css类。

只需从bootstrap v1 css（带有网格16）实现旧值，因为v2不再实现它。

.span-one-third{width:300px;} 
.span-two-thirds{width:620px;} 
.offset-one-third{margin-left:340px;} 
.offset-two-thirds{margin-left:660px;}

现在你仍然可以有跨度三分之一和跨度三分之二的类。这是从Bootstrap代码中提取的：https://github.com/twbs/bootstrap/blob/v1.3.0/lib/scaffolding.less#L133

来源

2012-05-02 16:15:56

对于任何访问此的人来说，了解不使用此代码非常重要。它会打破响应式的风格，今天它不正确，也没有正确的建议。 – jonschlinkert 2012-10-23 02:43:42

而不是仅仅说这是错误的，为什么不提供一个替代解决方案的问题？你可以编辑答案。 – doogle 2012-11-01 14:22:30

是的，它不适用于响应式样式，但也可以使用响应式样式来处理，只需将％值与流体行类一起添加即可。该代码只是为了帮助他在将引导从1.0更新为2.0时保持其应用程序不中断运行。我不认为这是错的，但它确实错过了敏感的价值观。这是旧的价值观，正如他所说：“我创建了一个定制的网格”。它适用于从1.0更新到2.0以及在其应用上使用16个网格系统的用户，因为它不再实施。 – 2012-11-01 20:47:50

引导用于包括翼展三分之一的原因是，在网格中使用16列。今天，Bootstrap的网格默认包含12列（跨度）。所以，假设你没有自定义使用不同的列数只是使用以下电网：

<!-- 3-columns, 1/3 each --> 
<div class="row"> 
    <div class="span4">1/3 width</div> 
    <div class="span4">1/3 width</div> 
    <div class="span4">1/3 width</div> 
</div> 

<!-- 2-columns, 1/2 each --> 
<div class="row"> 
    <div class="span6">1/2 width</div> 
    <div class="span6">1/2 width</div> 
</div>

来源

2012-04-19 23:06:15 jonschlinkert

带Twitter引导程序的1/3列

回答

相关问题