带有一列自动宽度的自举网格

Question

我正在使用引导程序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| 
|....                   | 
|_____________________________________________________________________________| 

基本上，日期列应始终位于右侧，并且消息列应使用所有可用宽度，并且如果消息大于可用空间，则应将其截断（或溢出隐藏）

感谢

Answer 1

注意白手起家电网主要布点目的，你在这里是基于网格的内容，又名，一张桌子。

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

Answer 2

你可以在一个大列包住div秒，然后设置这些display: table-cell：

喜欢的东西下面的代码片段。

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

片段：

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>