将组件定位在引导程序面板标题内

Question

使用bootstrap,如何在面板标题内水平对齐组件？为了得到:title:对齐到左边,btn1:居中,btn2:向右对齐.

<div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">title</h3>

            <button class="btn">btn1</button>

            <button class="btn">btn2</button>
        </div>

        <div class="panel-body">
            text
        </div>
    </div>
</div>

我试图创建一个引导类"行"和列,但该行超出了面板标题,因为该面板位于另一个col-md-6中:

Answer 1

使用.row和.col的正确方法就是这样

<div class="panel panel-default container-fluid">
    <div class="panel-heading row">
        <div class="col-xs-4"><h3 class="panel-title">title</h3></div>
        <div class="col-xs-4 text-center"><button class="btn">btn1</button></div>
        <div class="col-xs-4"><button class="btn pull-right">btn2</button></div>
    </div>
    <div class="panel-body">
        text
    </div>
</div>

http://jsfiddle.net/j7u53eav/3