Html 将组件放置在引导面板标题内

使用引导，如何在面板标题内水平对齐组件？为了使：标题：向左对齐，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>

标题
btn1
btn2
文本

我试图创建一个引导类“row”和columns，但由于面板位于另一个col-md-6中，因此该行超出了面板标题：

---

正确使用.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>

标题
btn1
btn2
文本

---

使用Ch.Idea的答案作为起点，您可以将行类添加到

面板标题中。但是，不需要将面板设置为
容器流体

因为Bootstrap
行
类添加了负边距，所以您只需要删除它们。假设每次将
行
添加到
面板标题
时，您都希望看到这种行为，那么只需添加一些CSS即可：

.panel-heading.row {
  margin: 0
}

由于列已经有了填充，您还可以通过删除行的左侧和右侧来进一步填充：

.panel-heading.row {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

为了彻底起见，对奇迪德的作品进行了修改：

<div class="panel panel-default">
    <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>
    <table class="table">
      <!-- insert rest of table here -->
    </table>
</div>


标题
btn1
btn2
文本

以及一个显示全宽表格的修改JSFIDLE：

将类向右拉添加到H3，使用您的代码可以完美对齐组件。然而，该行超出了面板的水平限制，如我的问题所示。而且标题似乎与其他组件没有垂直对齐。在这种情况下，您可以将其放在容器或容器流体中。这对我来说是完美的，它应该是被接受的答案，只要它被编辑成链接的fiidle。这让我大部分时间都在那里。但是，由于它现在是一种容器流体，因此无法消除“主体”中的填充物；例如，当您放下面板主体并插入应从左到右边框的表格时。“虚拟”填充（列填充加上容器流体填充）也加倍。