twitter-bootstrap 使 Twitter Bootstrap 表最右边的列与边缘齐平
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20151370/
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
Make Twitter Bootstrap Table's right most column flush against the edge
提问by MeyerRJ
I'm using Twitter-Bootstrap (3.0) to design a project website for school, we're making an online Risk clone, with independant turns like Words With Friends. I use an HTML table to displays the player's list of current games and I would like to make it so the right-most column is flush against the edge and doesn't have a lot of extra white space.
我正在使用 Twitter-Bootstrap (3.0) 为学校设计一个项目网站，我们正在制作一个在线风险克隆，具有像 Words With Friends 这样的独立回合。我使用一个 HTML 表格来显示玩家当前游戏的列表，我想让它使最右边的列与边缘齐平并且没有很多额外的空白。
Here is my dummy table:
这是我的虚拟表：
<table class = "table table-hover">
<thead>
<tr>
<th> Game ID </th>
<th> Status </th>
<th> Players </th>
<th> Turn </th>
<th> Last Turn </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> IN PROGRESS </td>
<td> 4/4 </td>
<td> tedbeem </td>
<td> 11/12/13 6:30 PM </td>
<td> <button class = "btn btn-primary"> View </button> </td>
</tr>
<tr>
<td> 2 </td>
<td> RECRUITING </td>
<td> 4/5 </td>
<td> N/A </td>
<td> 11/12/13 3:10 PM </td>
<td> <button class = "btn btn-primary"> View </button> </td>
</tr>
<tr>
<td> 13 </td>
<td> IN PROGRESS </td>
<td> 3/3 </td>
<td> D-Halt-on </td>
<td> 11/12/13 9:00 AM </td>
<td> <button class = "btn btn-primary"> View </button> </td>
</tr>
</tbody>
</table>
An example of what I want it to look like can be found here: http://bootsnipp.com/snippets/featured/table-with-users
我希望它看起来像的一个例子可以在这里找到：http: //bootsnipp.com/snippets/featured/table-with-users
What they did is give the last element a fixed width and somehow it works. Can someone explain this or give my a better solution?
他们所做的是给最后一个元素一个固定的宽度，它以某种方式起作用。有人可以解释这个或给我一个更好的解决方案吗？
回答by KyleMit
The problem is that the last column (which is rightaligned)takes up more space than the button inside it (which is leftaligned)needs.
问题是最后一列（右对齐）占用的空间比其中的按钮（左对齐）需要的空间多。
To fix this, you can do either of the following:
要解决此问题，您可以执行以下任一操作：
Shrink the column to take up a smaller amount of space, so the button appears to hug the right*:
table tr td:last-child { white-space: nowrap; width: 1px; }Right align the content of the last row so the button aligns to the right size of all the space it is allotted.
table tr td:last-child { text-align: right; }
缩小列以占用较小的空间，因此按钮看起来紧靠右侧*：
table tr td:last-child { white-space: nowrap; width: 1px; }右对齐最后一行的内容，以便按钮对齐分配给它的所有空间的正确大小。
table tr td:last-child { text-align: right; }
*Note: The sample went with the first option by applying an inline style to the last header, effectively setting the width for the whole column with <th style="width: 36px;"></th>
*注意：该示例采用第一个选项，通过将内联样式应用于最后一个标题，有效地设置了整个列的宽度<th style="width: 36px;"></th>
Working Demo in jsFiddle
jsFiddle 中的工作演示
Which will look like this:
看起来像这样：
回答by MeyerRJ
Using the Bootstrap framework, you can simply add the text-rightclass to the last td cell. http://getbootstrap.com/css/#type-emphasis(Scroll down to the Alignment classes)
使用 Bootstrap 框架，您可以简单地将text-right类添加到最后一个 td 单元格。 http://getbootstrap.com/css/#type-emphasis（向下滚动到对齐类）
If you want to make your buttons smaller, look into the button sizing classes: btn-smor btn-xshttp://getbootstrap.com/css/#buttons-sizes
如果您想让按钮变小，请查看按钮大小调整类：btn-sm或btn-xs http://getbootstrap.com/css/#buttons-sizes
回答by David Nguyen
It's just how tables work, what I would do is this:
这就是表格的工作方式，我会做的是：
Give your table an ID
给你的桌子一个 ID
<table id="my_table">
Specify this:
指定：
#my_table tbody tr td:last-child {
white-space: nowrap;
width: 1%
}
Basically compress the last column as much as you can but do not wrap anything.
基本上尽可能多地压缩最后一列，但不要包装任何东西。
