在行引導表中顯示img

Question

我想在引導表內顯示兩個圖像，任何想法？

繼承人的代碼，

<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> 

Answer 1

<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> 

試試這個

Answer 2

嗨，你可以嘗試響應舉表這種簡單的代碼，讓我知道

<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> 

Answer 3

如果你想顯示圖像旁邊可以使用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> 

Answer 4

您可以添加CSS

img{ display:inline-block; }