すごーく久しぶりになりました。。。
ようやく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;
}
}