0

我正在使用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 类别,所以请原谅我的 janky 标记(特别是 i 元素的过分使用)。

4

1 回答 1

0

添加一个clearfix类到h3.media-heading.

<h3 class="media-heading clearfix">
于 2013-04-29T04:34:11.233 回答