我如何使用調整為帶有桌子的小屏幕的引導網格系統

Question

我有一個PHP genreted表，該表檢索數據並在表中動態顯示數據。 必須根據表格屏幕顯示表格數據。

這是我的代碼：

echo "<div class='container'><div class='row'><div class='col-sm-3'></div><div class='col-sm-6'><div class='table-responsive'><table border='0' class='table' >

<tr>
<td><img src='itempics/$i.jpg' width=200 height=200></td>
<td><h3>Product Details:</h3><b>Product:</b> ".$arr['pname']."<br>
<b>Item No:</b> ".$arr['itemno']."<br>
<b>Price:</b> ".$arr['price']."<br>
<b>Size:</b> ".$arr['size']."<br></td>

<td><h3>Buyer Details:</h3><b>Buyer:</b>  ".$arr['uname']."<br>
<b>Account No:</b> ".$arr['ac_no']."<br>
<b>Mobile No:</b> ".$arr['mob_no']."<br>
<b>Address:</b> ".$arr['add']."<br>
<b>Bank:</b> ".$arr['bank']."<br>
<b>City:</b> ".$arr['city']."<br>
<b>Order No:</b> ".$arr['order_no']."<br></td>
</tr>
</table>
</div>
</div>
<div class='col-sm-3'></div>
</div>
</div>

“;

在td類內部，我使用.col-sm-3和各種引導方法，但是當屏幕較小時，則不會根據屏幕采用。 我看不到表格中的“買家詳細信息”部分。 即使我使用了響應式圖像類，但在這種情況下它使用較少。 我要的是屏幕尺寸很小的圖像位於表的下一行中的產品詳細信息和下一行中的買方詳細信息中。 誰能告訴我如何正確做到這一點...

我可以使用div標簽代替<td>標簽嗎？

Answer 1

使用col-xs-val寬度<= 768px，而不是生成的html中的col-sm-val

Answer 2

您必須使用指定的col-xs類，對於圖像，請使用“ img響應”類，而對於縮略圖，則可以使用“ img-縮略圖”。

用以下代碼替換代碼：

    <div class='container'>
    <div class='row'><div class='col-xs-3'></div><div class='col-xs-6'><div class='table-responsive'><table border='0' class='table' >

<tr>
<td><img class="img-responsive" src='itempics/$i.jpg'></td>
<td><h3>Product Details:</h3><b>Product:</b> ".$arr['pname']."<br>
<b>Item No:</b> ".$arr['itemno']."<br>
<b>Price:</b> ".$arr['price']."<br>
<b>Size:</b> ".$arr['size']."<br></td>

<td><h3>Buyer Details:</h3><b>Buyer:</b>  ".$arr['uname']."<br>
<b>Account No:</b> ".$arr['ac_no']."<br>
<b>Mobile No:</b> ".$arr['mob_no']."<br>
<b>Address:</b> ".$arr['add']."<br>
<b>Bank:</b> ".$arr['bank']."<br>
<b>City:</b> ".$arr['city']."<br>
<b>Order No:</b> ".$arr['order_no']."<br></td>
</tr>
</table>
</div>
</div>
<div class='col-xs-3'></div>
</div>
</div>