読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

BootstrapのGridを使う時に何よりも意識しておきたいこと

Bootstrap WebDev

 .containerと.rowについてです。

.col-xx-n の親たる.rowを使うためには、その親の.containerないし.container-fluidが必要

<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <!-- content -->
   </div>
  </div>
</div>

.containerはネストできないが、.rowはネストできる。

<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
     <div class="row">
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
     </div> 
   </div>
  </div>
</div>

上を言い換えると、.rowの中に.containerは表れてはいけない

<!-- ×これは正しくない例 -->
<div class="container-fluid">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
     <div class="container">
     <div class="row">
        <div class="col-md-8">
        </div>
        <div class="col-md-4">
        </div>
     </div> 
     </div>
   </div>
  </div>
</div>

横幅をフルに使いたいときなどは、いったんcontainerを閉じる

<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
   <!--  content -->
   </div>
  </div>
</div>
<div class="full-width">
   <img src="hoge.jpg" alt="hoge" class="full-width-image">
</div>
<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
   <!--  content -->
   </div>
  </div>
</div>

ちなみに、Bootstrapについて書かれた本で一番良かったのはこれです。Foundation 5についても学べます。

これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books)

これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books)