排列我的產品列表

我目前正在學習asp.net mvc的東西和設計我的產品頁面上的多個試驗和錯誤，我迷失在如何安排我的產品排。作爲目前它接連像排列我的產品列表

如

產品1

產品2

產品3

產品4

在哪裏，而不是我想讓它像棧垂直1

例如

Product 1 Product 2 Product 3 Product 4

這是我覺得我應該改變的區域，但我已經嘗試過許多東西，如內聯塊，浮動：左但沒有改變

這裏是我的產品的部分代碼，關於如何按照4乘3來安排的任何幫助，因爲我目前正在學習12種產品。

預先感謝您！

<div class="col-md-12"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h2 class="panel-title" style="font-size:24px"><strong>Products</strong></h2> 
     </div> 

     <div class="panel-body"> 
      <div class="col-md-4"> 

       <table cellpadding="10" data-bind="foreach: contactLens"> 
        <tr> 
         <td > 
          <div class="entire-package"> 
           <img width="255" height="190" data-bind="attr: { src: 'data:image/jpeg;base64,'+ Image }" /> 
           <div class="detail-design"> 
            <strong><span data-bind="text: Name"></span></strong> <br /> 
            Type: <span data-bind="text: Type"></span><br /> 
            Brand: <span data-bind="text: Brand"></span> <br /> 
            Price: <span data-bind="text: Price"></span> <br /> 
            Amount: <span data-bind="text: Amount"></span> <br /> 
            <a href="#" data-bind="click:$parent.getProductDetails" class="btn btn-primary btn-xs" style="font-size:18px">Details</a> 
           </div> 
          </div> 
         </td> 

        </tr> 
       </table> 

      </div> 
     </div> 
    </div> 
    <div class="alert alert-danger" data-bind="visible: error"><p data-bind="text: error"></p></div> 
</div>

來源

2016-11-24 Rind

你試過對'col-md-4'的'div'做'data-bind =「foreach：...」'。你的代碼在一分鐘的方式，你正在創建*一個*列，4範圍內，只是有數量的表內。您需要「循環」產品並將它們放入「列」中 - 也可以查看不同的'col-xs' /'sm' /'md' /'lg'以獲得您喜歡的響應性。 –

嗯......你的'foreach'中包含''嗎？這可能是一個問題，因爲每個''產生一個新的表格行... – Serlite

下面是一個例子，它的樣子如何。

<html> 
<body> 
    <table style="width:50%"> 
    <tr> 
     <th>Product</th> 
     <th>Brand</th> 
     <th>Price</th> 
     <th>Amount</th> 
    </tr> 
    <tr> 
     <td>Name</td> 
     <td>Value</td> 
     <td>Value</td> 
     <td>Value</td> 
    </tr> 
    </table> 
</body> 

<style> 
table, th, td { 
    border: 1px solid black; 
    border-collapse: collapse; } 
th, td { 
    padding: 5px; 
    text-align: left; } 
</style>

來源

2016-11-24 22:33:42 nudelkopf

排列我的產品列表

回答

相關問題