Reputation: 351
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..
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
Upvotes: 4
Views: 11185
Reputation: 28437
You could wrap your div
s in one large column and then set display: table-cell
on those:
Something like the snippet below.
Fiddle: 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>
Upvotes: 0
Reputation: 71240
Note that Bootstraps grid is primarily layouting purposes, what you have here is grid based content, aka, a table.
@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>
Upvotes: 3