twitter-bootstrap - 带有 Twitter Bootstrap 的 1/3 列

Question

我用 Twitter Bootstrap 2.0 创建了一个自定义网格，我试图弄清楚如何更新网格以允许我使用 1/3 和 1/2 列。

看起来你可以使用 1.0：

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

有没有人能想出用 2.0 做类似事情的方法，还是我忽略了什么？

谢谢

Answer 1

Bootstrap 过去包含 span-one-third 的原因是网格使用了 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>  

Answer 2

对于较新的版本（从 v2 开始），只需使用 span4 或 col-xx-4 列，因为它是 12 列网格。

对于引导程序 2：

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

对于引导程序 3（示例）：

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

原始和过时的答案

为了明确起见，这个答案是为了保持与使用 Bootstrap v1 的 HTML 的应用程序的兼容性，这些应用程序没有任何响应的东西并且网格是 16 列（当他们改变它时，一些已经使用 v1 的项目开始了使用带有 16 列的新 v2 版本）。他们实际上有 .span-one-third 等 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;}

现在你仍然可以拥有 span-one-thirds 和 span-two-thirds 类。这是从引导代码中提取的：https ://github.com/twbs/bootstrap/blob/v1.3.0/lib/scaffolding.less#L133