Bootstrap-3.3.0

新バージョンがリリースされていたので適用してみた。 修正が必要だったのは以下の通り。

Media,Media list

media関連のスタイルの扱いが大きく変わっている。media-bodyはtable-cell扱いになり、コンテンツの中身が無いと幅が縮小して表示されてしまう。また、pull-left,pull-rightの扱いが変更になり、新たに追加されたmedia-left,media-rightの明示が必要になった。
従って右寄せで配置したいコンテンツをこれまでmedia-body内でpull-rightしていたのを、別途media-rightにして切り出す必要がありそう。

一体誰が得するんだ、この変更は。

<div class="media">
  <a class="media-left media-middle" href="#">
    <img data-src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

<ul class="media-list">
  <li class="media">
    <a class="media-left" href="#">
      <img src="..." alt="...">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

.media {
  margin-top: 15px;
}
.media:first-child {
  margin-top: 0;
}
.media-right,
.media > .pull-right {
  padding-left: 10px;
}
.media-left,
.media > .pull-left {
  padding-right: 10px;
}
.media-left,
.media-right,
.media-body {
  display: table-cell;
  vertical-align: top;
}
.media-middle {
  vertical-align: middle;
}
.media-bottom {
  vertical-align: bottom;
}
.media-heading {
  margin-top: 0;
  margin-bottom: 5px;
}
.media-list {
  padding-left: 0;
  list-style: none;
}

なお、リリース直後はBootstrap CDNのドメインが変更になっていたけれど、この記事を書いている時点で、これまでのものに修正されていた。