如何在Panel Title的左侧和右侧添加文本？

Question

我正在使用Twitter Bootstrap为我带走了很多CSS工作.我想将他们的面板用于用户的某种"发布".我希望标题部分包含标题右侧的编辑/删除超链接,而标题本身则在左侧对齐.

我试过这个没有成功:

<div class="row">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">@vModel.Title <span class="text-right">Hey</span></h3>
        </div>
        <div class="panel-body">
            @vModel.Blog
        </div>
    </div>
</div>

标题应该在左边对齐(默认情况下是这样)但我希望在右侧显示附加文本"嘿".

编辑:http: //getbootstrap.com/dist/css/bootstrap.css

Answer 1

Twitter bootstrap有两个类可以帮助你.

首先是.text-right第二个是.pull-right这样添加这两个类,看看.

Answer 2

微小clearfix做它

<div class="panel panel-default">
    <div class="panel-heading">
         <div class="panel-title pull-left">
             Works fine for me!
         </div>
        <div class="panel-title pull-right">Text on the right</div>
        <div class="clearfix"></div>
    </div>
    <div class="panel-body">Panel content</div>
</div>

你可以在这里试试http://jsfiddle.net/b1Lec5ge/