twitter-bootstrap 具有一列自动宽度的 Bootstrap 网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27744999/
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
Bootstrap grid with one column auto width
提问by BraCa
I'm using bootstrap 3 and I'm trying to make a list of items, where each row has 4 columns.. I've tried to use the bs3 grid system, but it doesn't fit all my requirements (or at least I can't make it work), since one of the columns need to use all the available space..
我正在使用 bootstrap 3 并且我正在尝试制作一个项目列表，其中每行有 4 列..我尝试使用 bs3 网格系统，但它不符合我的所有要求（或至少我无法让它工作），因为其中一列需要使用所有可用空间..
Example:
例子：
_____________________________________________________________________________ | | | Container | |Checkbox| Name (130px)| Message | Date| |Checkbox| Name (130px)| Message adasdsadsadsadsadsadasaaaaaaaaaaaaa | Date| |Checkbox| Name (130px)| Message adsadsadsadsadsadsadsaaaaaaaaaaaaaa... | Date| |Checkbox| Name (130px)| Message | Date| |Checkbox| Name (130px)| Message | Date| |.... | |_____________________________________________________________________________|
Basically, the date column should always be on the right, and the message column should use all the available width, and if the message is bigger than the available space, it should be truncated (or the overflow hidden)
基本上日期列应该总是在右边，消息列应该使用所有可用的宽度，如果消息大于可用空间，它应该被截断（或隐藏溢出）
Thanks
谢谢
回答by SW4
Note that Bootstraps grid is primarily layoutingpurposes, what you have here is grid based content, aka, a table.
请注意，Bootstraps 网格主要用于布局，您在此处拥有的是基于网格的内容，也就是表格。
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
html,
body {
width: 100%;
margin: 0;
}
table {
width: 100%;
table-layout: fixed;
}
td:first-of-type,
td:last-of-type {
width: 50px;
}
td:nth-of-type(2) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}<table class="table table-striped">
<tr>
<td>fit</td>
<td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch
stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td>
<td>fit</td>
</tr>
<tr>
<td>fit</td>
<td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch
stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td>
<td>fit</td>
</tr>
<tr>
<td>fit</td>
<td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch
stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td>
<td>fit</td>
</tr>
<table>回答by Abhitalks
You could wrap your divs in one large column and then set display: table-cellon those:
您可以将您的divs包装在一个大列中，然后设置display: table-cell这些：
Something like the snippet below.
类似于下面的片段。
Fiddle: http://jsfiddle.net/abhitalks/qan2khse/
小提琴：http://jsfiddle.net/abhitalks/qan2khse/
Snippet:
片段：
div.table {
border: 1px solid gray;
border-collapse: collapse;
display: table;
}
div.cell {
border: 1px solid gray;
display: table-cell;
}
div.cell:first-child, div.cell:nth-child(2) {
width: 10%;
}
div.cell:nth-child(3) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.cell:last-child {
width: 10%;
text-align: right;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<span>Caption</span>
</div>
</div>
<div class="row">
<div class="col-xs-12 table">
<div class="cell">one</div>
<div class="cell">two</div>
<div class="cell">three</div>
<div class="cell">four</div>
</div>
</div>
</div>