我想在引導表內顯示兩個圖像,任何想法?在行引導表中顯示img
繼承人的代碼,
<tr>
<th scope="row">7</th>
<td></td>
<td>
<img class="img" src="example.jpg" alt="">
<img class="img" src="example.jpg" alt="">
</td>
</tr>
我想在引導表內顯示兩個圖像,任何想法?在行引導表中顯示img
繼承人的代碼,
<tr>
<th scope="row">7</th>
<td></td>
<td>
<img class="img" src="example.jpg" alt="">
<img class="img" src="example.jpg" alt="">
</td>
</tr>
<table>
<th scope="row">7</th>
<tr>
<td>
<img class="img" src="example.jpg" alt="">
<img class="img" src="example.jpg" alt="">
</td>
</tr>
</table>
試試這個
嗨,你可以嘗試響應舉表這種簡單的代碼,讓我知道
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td><img src="image1.jpg"></td>
<td><img src="image2.jpg"></td>
</tr>
</tbody>
</table>
</div>
如果你想顯示圖像旁邊可以使用div
,而不是table
,因爲它w生病是最好的做法。
在Bootstrap中,每個row
分爲12
列。您可以閱讀this以瞭解有關Bootstrap網格系統的說明。您可以使用任何組合來設置圖像。
6 + 6 = 12
4 + 4 + 4 = 12
3 + 3 + 3 + 3 = 12
-
-
etc
如果我們以4 + 4 + 4 = 12這個組合爲例。我們將能夠在任何兩個div中設置圖像。代碼將是這樣的:
<div class="row">
<div class="col-md-4">
<img class="img" src="example.jpg" alt="">
</div>
<div class="col-md-4">
<img class="img" src="example.jpg" alt="">
</div>
<div class="col-md-4">
</div>
</div>
如果你想使用表,那麼首先閱讀this文章。然後,代碼會像下面:
<table>
<th scope="row">7</th>
<tr>
<td>
<img class="img" src="example.jpg" alt="">
</td>
<td>
<img class="img" src="example.jpg" alt="">
</td>
</tr>
</table>
您可以添加CSS
img{ display:inline-block; }
這是最好的答案,因爲它顯示了「引導方式」。通過使用其網格系統,您可以確保您可以輕鬆控制不同尺寸屏幕上的UI行爲。 – tocqueville