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

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


スポンサーリンク

...

Media heading

...

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

@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;
	}
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です