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

ブートストラップがスパン 1/3 を含めていた理由は、グリッドが 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

For newer versions (since v2), just use the span4 or col-xx-4 columns, since it is a 12 column grid.

For bootstrap 2:

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

For bootstrap 3 (example):

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

ORIGINAL AND OUTDATED ANSWER

Just to make clear, this answer was to maintain the compatibility to applications that had the HTML using Bootstrap v1, that didn't have any responsive stuff and where the grid was 16 columns (when they changed that, some projects that already used v1 started using the new v2 version costumized with 16 columns). And they actually had .span-one-third, etc, css classes.

Just implement the old values from the bootstrap v1 css (with grid 16), as v2 doesn't implement it anymore.

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

And now u can still have the span-one-third and span-two-thirds classes. This was extracted from Bootstrap code: https://github.com/twbs/bootstrap/blob/v1.3.0/lib/scaffolding.less#L133