ある種のソーシャル ネットワークのユーザー プロファイルに、Twitter Bootstrap のメディア オブジェクトスタイルを使用しています。非常に標準的なレイアウト: 左にアバター/ロゴ、右にタイトルと簡単な説明 (申し訳ありませんが、画像を提供するのに十分な担当者がいませんが、以下の jsfiddle を参照してください)。
行き詰まっている場所: メディアの見出しの横に「フォロー」ボタンを含める必要がありますが、長いメディアの見出しを処理するために適切に配置する方法がわかりません (ボタンはメディアの本文に折り返されます)。
顔と手のひらの瞬間に向かっていると思われます。
両方のケースを示すjsfiddleを次に示します。
ここに私のHTMLがあります:
<div class="row">
<div class="span8 media top-buffer">
<div class="row">
<p class="media-object pull-left span2">
<img class="img-polaroid" src="160x120.jpg">
</p>
<div class="media-body span6">
<h3 class="media-heading">Some Name<i class="icon-circle addToFoo-yes-org"></i> <button class="addToFoo-org btn btn-flat pull-right"><i class="icon-plus-sign"></i> Add to My Foo</button><br />
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
これはプロトタイプ用であり、私は完全に n00b カテゴリに属しているため、私のぎこちないマークアップ (特に i 要素の悪質な使用) を許してください。