我正在一个项目中,我希望使用Bootstrap 3拥有一个“网格视图”,但是随后我想要一个按钮,用户可以单击以使用{{1将网格视图转换为“列表视图” }}由于某种原因,我无法使表格行(和单元格)扩展到100%的宽度。
display:table;
$(function() {
$('button').click(function(e) {
e.preventDefault();
$('.table-container').toggleClass('list-view');
});
});
.table-container.list-view {
display:table;
table-layout:fixed;
width:100%;
}
.table-header {
display:none;
}
.list-view .table-header, .list-view .details {
display:table-row;
width:100%; /* row is not extending full width of table */
}
.table-header > div {
display:table-cell;
}
.col-sm-6 {
margin-top:30px;
}
.list-view .col-sm-6 {
width:100%;
}
.col-sm-6 span {
display:block;
}
.list-view .col-sm-6 span {
display:table-cell;
}
.row.first .col-sm-6 {
margin-top:0;
}