bootstrap3.3.4のmediaコンポーネントを以下サイトを参考に記述しました。
参考サイト
※ul要素を使うスタイル
やりたいこととしては、
<li>1番目の画像は、デフォルトの左に配置でいいのですが、 <li>2番目の画像は右に配置して、左にテキストがあるような感じにしたいです。ただ、以下のソースですと、2番目の吹き出しが切れてしまいます。
どのように記述するのが正しいのでしょうか。
html
1<ul class="media-list"> 2 <li class="media"> 3 <span class="glyphicon glyphicon-user media-left" style="font-size: 26px; vertical-align: middle;"></span> 4 <div class="media-body"> 5 <div class="popover right show" style="position:relative; max-width:100%;"> 6 <div class="arrow"></div> 7 <div class="popover-content" style="padding: 2px 5px; font-size: 90%; line-height: 1.5;"> 8 <span>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</span> 9 </div> 10 </div> 11 </div> 12 </li> 13 <li class="media"> 14 <div class="media-body"> 15 <div class="popover left show" style="position:relative; max-width:100%;"> 16 <div class="arrow"></div> 17 <div class="popover-content" style="padding: 2px 5px; font-size: 90%; line-height: 1.5;"> 18 <span>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</span> 19 </div> 20 </div> 21 </div> 22 <span class="glyphicon glyphicon-user media-right" style="font-size: 26px; vertical-align: middle;"></span> 23 </li> 24 </ul>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/12/18 08:44
2017/12/18 09:05
退会済みユーザー
2017/12/18 09:31