Bootstrapにおけるグリッドのネスト（入れ子）ついて | This section describes grid nesting in Bootstrap.

nest（入れ子）とはあるモノの中にそれと同じ形や異なる種類のものが入っている状態のこと。| Nesting is a state in which something of the same shape or different type is contained in a certain object.

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」として処理されます。| A 3-column grid has been added to the columns of the article parts whose width is "8" in blue letters. Then, the grid of the child hierarchy is processed with the width of the parent hierarchy as "12".

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

やっぱり詳しい人から深く学びたい人はこちらをどうぞ。| If you want to learn more from those who are familiar with it, please click here.