twitter-bootstrap HTML Bootstrap 表格标题（标题），标题在左侧，按钮在右侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22486402/
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
HTML Bootstrap table title (caption) with title on left side and buttons on right side
提问by Mendes
I want to build a table with a title bar. The title bar has to have the title on the left side and some buttons (that I′ll add Javascript support) on right side. I′m not succeeding.
我想建立一个带有标题栏的表格。标题栏必须在左侧有标题，在右侧有一些按钮（我将添加 Javascript 支持）。我没有成功。
Code:
代码：
<div class="table-responsive small">
<table class="table table-striped table-bordered table-hover table-condensed">
<caption style="border: inherit; background-color: lightgrey;">
<span class="align-left"><strong>Monthly Savings Report</strong></span>
<button type="button" id="printBtn" class="btn btn-default btn-sm" title="Print">
<span class="glyphicon glyphicon-print"></span>
</button>
</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
</table>
</div>
Questions:
问题：
a) How Can I align the title text 'Monthly Savings Report' to left and the Print button to right ?
a) 如何将标题文本“每月储蓄报告”向左对齐，将“打印”按钮向右对齐？
b) Is there a way to style it better (using Bootstrap default style classes instead of style="border: inherit; background-color: lightgrey;"?
b) 有没有办法更好地设置样式（使用 Bootstrap 默认样式类而不是style="border: inherit; background-color: lightgrey;"?
回答by James
To align the Print button to the right use this
要将打印按钮对齐到右侧，请使用此
.table caption button{
float:right;
}
To style the caption remove the inline styling and add the below in your stylesheet
要设置标题样式，请删除内联样式并在样式表中添加以下内容
.table caption{
border: inherit;
background-color: lightgrey;
}
