具有一列自动宽度的Bootstrap网格

Question

我正在使用bootstrap 3而我正在尝试制作一个项目列表，其中每行有4列。 我曾尝试使用bs3网格系统，但它并不符合我的所有要求（或者至少我无法使其工作），因为其中一列需要使用所有可用的空间..

示例：

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

基本上，date列应该总是在右边，而message列应该使用所有可用的宽度，如果消息大于可用空间，它应该被截断（或者溢出隐藏）

由于

Answer 1

您可以将div封装在一个大列中，然后在display: table-cell上设置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; }：

类似下面的代码段。

小提琴 ： http://jsfiddle.net/abhitalks/qan2khse/

<强> 段 ：

＆＃13;

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;