Question

我想使用bootstrap解决方案来动态生成包含元素的列，并将此列溢出为水平滚动。

我的项目应显示按品牌订购的产品清单。所以专栏是一个品牌，在专栏中有很多产品。

我看到Bootstrap响应表可能是一个解决方案，但我无法满足我的需求。当我需要按列组织数据时，此表按行组织数据。

以下是它应该如何的图像：

下面的代码是使用JS生成的。我正在构建我的产品，并且我正在推动他们使用＆＃34; col-3＆＃34;那是我的品牌。只要我最多有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>

Answer 1

您可以使用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>

https://plnkr.co/edit/sybd6FW749SFHr3DAqQ4?p=preview

Answer 2

在互联网上深入搜索我找到了一个我能适应我的解决方案：TW Bootstrap: How to overflow columns

感谢您的时间。

垂直填充Bootstrap响应表

2 个答案: