Bootstrap3のMedia objectをレスポンシブ対応にする

Bootstrap3ではモバイルファーストでレスポンシブデザインに対応したので、レスポンシブ対応なサイトを作るのが非常に楽になりました。

ところでBootstrapにはMedia objectという要素があって、サムネイル画像＋テキストのリストを綺麗に表現することができます。

ところがこの要素がレスポンシブデザインに対応できていないようです。

というかMedia objectで使っている .pull-left がレスポンシブに対応しておらず、小さい画面でも無理やり回り込んでしまう。

そこで、画面サイズがsm以上の時だけ回り込みする .pull-sm-left / .pull-sm-right を作って対応します。

まずSass版のBootstrap 3.1をダウンロード。Railsで使うなら、assetsに入れておけば勝手にコンパイルされるからクソ便利ですね。

bootstrap.scssの最後に次の行を追加。

@import "bootstrap_custom";

bootstrap_custom.scssをこんな感じで。

@media (min-width: $screen-xs-max) {
  .pull-sm-left {
      float: left;
  }
  .pull-sm-right {
      float: right;
  }
  .media {
    > .pull-sm-left {
      margin-right: 10px;
    }
    > .pull-sm-right {
      margin-left: 10px;
    }
  }
}

@media (max-width: $screen-sm-min) {
  .media {
    > .pull-sm-left, .pull-sm-right {
      margin-bottom: 10px;
    }
  }
}

Bootstrap 3.1で公式にSassに対応したのでカスタマイズが容易になりました。