bootstrapのMedia objectがレスポンシブならないので修正してみた

すごーく久しぶりになりました。。。
ようやくbootstrap3の感じにもなれてきたのですが、あれ？ナニコレ？おかしいという現象があったのでその対策を載せておきます。
bootstrap2のmedia-objectだとうまくレスポンシブに表示されるのですが現状3.1.1ですがうまく表示されません。。。もう2ヶ月以上3.1.1のままだし。。
強制的に左右に配置されておりスマートフォンではきれいに表示されません。画像のサイズが小さければいいのですが、大きい場合だと写真しか表示されず、おかしな事になっています。おそらくバージョンアップで解消されるとは思うのですが、mediaクラス直下のpull-rightやpull-leftがおかしいもよう。調べてみると出てきますがほぼ英語、多いですね。

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

上記が問題のmedia-objectです。日本語で書いている人いないと思ったら発見しました。こちらの記事ではSASSで書いていたようですが、そのままCSSにしました。ここのpull-leftをpull-sm-leftとして以下の用に修正してうまくいきました。
custom.cssとかに以下の記載をして表示させることにしました。なんとかこれでひとまず解決！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

Tweet

Pocket