我正在使用Twitter Bootstrap的媒体对象样式为我们在社交网络上的用户配置文件。非常标准的布局:头像/徽标在左边,标题和简短的描述在右边(抱歉,没有足够的代表来提供图像,但请参阅下面的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元素)。
添加clearfix
到h3.media-heading
<h3 class="media-heading clearfix">