Bootstrapにおけるグリッドのネスト（入れ子）ついて

nest（入れ子）とはあるモノの中にそれと同じ形や異なる種類のものが入っている状態のこと。

HTML

<div class=”container”>
<!– 1行目 –>
<div class=”row”>
<div class=”col-sm-12″>
<div class=”header”>
<h1><a href=”#”><img src=”bicycle.png” alt=”” class=”logo”>BICYCLE</a></h1>
</div>
</div><!–col–>
</div><!–row–>

<!– 2行目 –>
<div class=”row”>
<div class=”col-sm-12″>
<div class=”menu”>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>Bootstrap</a></li>
<li><a href=”#”>Javascript</a></li>
</ul>
</div>
</div><!–col–>
</div><!–row–>

<!– 3行目 –>
<div class=”row”><!–➀親階層のグリッド–>
<div class=”col-sm-8″><!–➁記事の範囲–>
<div class=”entry”>
<img src=”photo.jpg” width=500px alt=””>
<h3>果てしない直線道を自転車で走る</h3>
<div class=”added”>
<p>
<a href=”#” class=”1b”>自転車の旅</a>
<a href=”#” class=”1b”>おすすめのサイクリングロードはこちら</a>
</p>
</div>
<p>北海道を～。</p>
<p>孤独との～。</p>
</div>

<div class=”row”><!–子階層のグリッド–>
<!– タイトルA, –>
<div class=”col-sm-12 col-md-4″>
<div class=”title”>
<div id=”waku”>
<h1>タイトルA</h1>
<p>BON JOVI</p>
</div>
</div>
</div><!–col–>

<!– タイトルB, –>
<div class=”col-sm-6 col-md-4″>
<div class=”title”>
<div id=”waku”>
<h1>タイトルB</h1>
<p>DREAM THEATER</p>
</div>
</div>
</div><!–col–>

<!– タイトルC, –>
<div class=”col-sm-6 col-md-4″>
<div class=”title”>
<div id=”waku”>
<h1>タイトルC</h1>
<p>Mr BIG</p>
</div>
</div>
</div><!–col–>
</div><!–row–>

</div><!–➁記事の範囲–>
<!– ここからカテゴリー –>
<div class=”col-sm-4″>
<div class=”menu”>
　　　<h3>カテゴリー</h3>
<ul>
<li><a href=”#”>旅の思い出</a></li>
<li><a href=”#”>おすすめのサイクリングロード</a></li>
<li><a href=”#”>ハプニング</a></li>
<li><a href=”#”>気を付けること</a></li>
</ul>
</div>
</div> <!–col–>

</div><!–➀親階層のグリッド–>
</div><!–container–>

青文字で幅を「８」にした記事パーツの段の中に、3段組のグリッドを追加しました。すると子階層のグリッドは、親階層の幅を「12」として処理されます。

＊尚、ここではBootstapバージョン3.1.1を使用しています。 こちらからダウンロードできます。新しいバージョンをご使用だと機能しない部分も出てきます。| If you use a new version, some parts may not work.

レベルアップにプロからの学びを。