1. ホーム
  2. twitter-bootstrap

[解決済み] twitterのbootstrapで五等分の列を作る

2022-03-23 05:59:51

質問

私が作っているページで5つの等しいカラムを持ちたいのですが、ここで5カラムグリッドがどのように使われているのかが理解できないようです。 http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive

上で紹介されている5列グリッドは、twitterのブートストラップフレームワークの一部なのでしょうか?

解決するには?

span2のクラスを持つ5つのdivを使用し、最初のクラスにはoffset1を与える。

<div class="row-fluid">
    <div class="span2 offset1"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

ほらね。 5つの列が均等に配置され、中央に配置されています。


bootstrap 3.0では、このコードは次のようになります。

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>


アップデイト

bootstrap 4.0 では、デフォルトで Flexbox が使用されるため。

<div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>