在引导面板标题内定位组件答案

【问题标题】：Position components inside a bootstrap panel-heading在引导面板标题内定位组件
【发布时间】：2015-05-08 03:03:19
【问题描述】：

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

【问题讨论】：

将类 pull-right 添加到 h3

标签： html css twitter-bootstrap

【解决方案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

【讨论】：

组件使用您的代码完美对齐。但是，如我的问题所示，该行超出了面板的水平限制。并且看起来标题与其他组件没有垂直对齐。
在这种情况下，您可以将其放入容器或容器流体中。 jsfiddle.net/j7u53eav/1
这对我来说非常有效，一旦它被编辑为看起来像链接的文件，它应该是公认的答案。
这让我很顺利。但是，由于它现在是容器流体，因此您无法消除“主体”中的填充；例如，当您放下面板主体并插入应该从左到右边框的表格时。 “虚拟”填充（列填充加上容器流体填充）也加倍。

【解决方案2】：

使用 Ch.Idea 的答案作为起点，您可以将行类添加到您的 panel-heading。但是，您不需要将面板设为container-fluid。

由于 Bootstrap row 类添加了负边距，您只需将它们删除即可。假设每次将 row 添加到 panel-heading 时，您都会想要这种行为，就像添加一些 CSS 一样简单：

.panel-heading.row {
  margin: 0
}

由于列已经有填充，您可以通过从行中删除左右来进一步：

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

并且为了彻底起见，Ch.Idea 作品的修改副本：

<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>

还有一个修改后的 jsfiddle 显示全角表格：

http://jsfiddle.net/my7axd1b/3/

【讨论】：