我想使用bootstrap解决方案来动态生成包含元素的列,并将此列溢出为水平滚动。
我的项目应显示按品牌订购的产品清单。所以专栏是一个品牌,在专栏中有很多产品。
我看到Bootstrap响应表可能是一个解决方案,但我无法满足我的需求。当我需要按列组织数据时,此表按行组织数据。
以下是它应该如何的图像:
下面的代码是使用JS生成的。我正在构建我的产品,并且我正在推动他们使用" col-3"那是我的品牌。 只要我最多有4个品牌,效果很好。如果我添加第5列,则将最后一列推到现有列之一。这正是我试图改变的。我希望第5列与同一级别的列相同。其他人,并在我的品牌容器上有一个水平滚动。
<div id="ProductResultList" class="panel-body">
<div class="col-md-3">
<table class="table" id="searchTable">
<thead>
<tr>
<th>Brand A</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row" url="#" productid="2790">
<td>
<div class="row">
<div class="col-md-6">
<div class="col-md-12">Product 1</div>
</div>
<div class="col-md-2">
<div class="col-md-12 SearchPrice">1.5</div>
</div>
<div class="col-md-4">
<img data-src="holder.js/100x100" class="img-thumbnail" alt="100x100" style="width: 100px; height: 100px;" src="#" data-holder-rendered="true">
</div>
</div>
</td>
</tr>
<tr class="clickable-row" url="#" productid="2750">
<td>
<div class="row">
<div class="col-md-6">
<div class="col-md-12">Product 2</div>
</div>
<div class="col-md-2">
<div class="col-md-12 SearchPrice">1.5</div>
</div>
<div class="col-md-4">
<img data-src="holder.js/100x100" class="img-thumbnail" alt="100x100" style="width: 100px; height: 100px;" src="#" data-holder-rendered="true">
</div>
</div>
</td>
</tr>
...
</tbody>
</table>
</div>
<div class="col-md-3">
<table class="table" id="metasearchTable">
<thead>
<tr>
<th>Brand B</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row" url="#" productid="2790">
<td>
<div class="row">
<div class="col-md-6">
<div class="col-md-12">Product 3</div>
</div>
<div class="col-md-2">
<div class="col-md-12 SearchPrice">2.5</div>
<div class="col-md-12">la pièce</div>
</div>
<div class="col-md-4">
<img data-src="holder.js/100x100" class="img-thumbnail" alt="100x100" style="width: 100px; height: 100px;" src="#" data-holder-rendered="true">
</div>
</div>
</td>
</tr>
<tr class="clickable-row" url="#" productid="2790">
<td>
<div class="row">
<div class="col-md-6">
<div class="col-md-12">Product 4</div>
</div>
<div class="col-md-2">
<div class="col-md-12 SearchPrice">2</div>
<div class="col-md-12">la pièce</div>
</div>
<div class="col-md-4">
<img data-src="holder.js/100x100" class="img-thumbnail" alt="100x100" style="width: 100px; height: 100px;" src="#" data-holder-rendered="true">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
答案 0 :(得分:0)
您可以使用bootstrap的网格系统执行此操作。
.product-image {
height: 75px;
width: 75px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
const productCount = 6;
$(document).ready(function() {
let theadHtml = '<tr>'
for (let col=0; col<productCount; col++) {
theadHtml += '<th>Product ' + col + '</th>'
}
theadHtml += '</tr>';
$('thead').html(theadHtml);
var bodyHtml = '';
for (let row=0; row<5; row++) {
bodyHtml += '<tr>'
for (let col=0; col<productCount; col++) {
bodyHtml += '<td>' +
'<div class="container">' +
'<div class="row">' +
'<div class="col-6">' +
'<div>This is an amazing wheel barrel</div>' +
'<div>10 E</div>' +
'</div>' +
'<div class="col-6">' +
'<img class="product-image" src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Wheelbarrow_icon.png"/>' +
'</div>' +
'</div>' +
'</div>' +
'</td>'
}
bodyHtml += '</tr>'
}
$('tbody').html(bodyHtml);
});
</script>
</head>
<body>
<table class="table">
<thead></thead>
<tbody></tbody>
</table>
</body>
</html>
答案 1 :(得分:0)
在互联网上深入搜索我找到了一个我能适应我的解决方案:TW Bootstrap: How to overflow columns
感谢您的时间。