Html 将组件放置在引导面板标题内
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28899959/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position components inside a bootstrap panel-heading
提问by Warrio
Using bootstrap, how can horizontally align components within a panel-heading? In order to have: title : aligned to left, btn1 : centered, btn2 : aligned to the right.
使用引导程序，如何在面板标题中水平对齐组件？为了有：标题：左对齐，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>
I have tried to create a bootstrap class "row" and columns, but the row goes outside the panel-heading since the panel is inside another col-md-6:
我试图创建一个引导类“行”和列，但该行在面板标题之外，因为面板在另一个 col-md-6 内：
回答by Ch.Idea
A right way to go with .row and .col is like this
使用 .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>
回答by Greg Pettit
Using Ch.Idea's answer as a jumping-off point, you can add a row class to your panel-heading. However, you do not need to make the panel a container-fluid.
使用 Ch.Idea 的答案作为起点，您可以将行类添加到您的panel-heading. 但是，您不需要将面板设为container-fluid.
Since the Bootstrap rowclass adds negative margins, you just need to remove them. Assuming every time a rowis added to a panel-headingyou would want this behaviour, it's as simple as adding some CSS:
由于 Bootstraprow类添加了负边距，您只需要删除它们。假设每次将 arow添加到 apanel-heading您都会想要这种行为，就像添加一些 CSS 一样简单：
.panel-heading.row {
margin: 0
}
Since columns already have padding, you can take it further by removing the left and right from the row as well:
由于列已经有填充，您可以通过从行中删除左侧和右侧来进一步进行填充：
.panel-heading.row {
margin: 0;
padding-left: 0;
padding-right: 0;
}
And for the sake of thoroughness, a modified copy of Ch.Idea's work:
为了彻底起见，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>
And a modified jsfiddle showing full-width tables:
以及显示全角表格的修改后的 jsfiddle：
