2016-07-29 4 views

ответ

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

попробовать это

0

Привет, вы можете попробовать этот простой код для отзывчивой таблицы самозагрузки, дайте мне знать,

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

Если вы хотите отображать изображения рядом друг с другом, вы можете использовать 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> 
+0

Это лучший ответ будет, потому что он показывает «Bootstrap путь». Используя свою сетевую систему, вы можете легко контролировать поведение пользовательского интерфейса на экранах разных размеров. – tocqueville

0

Вы можете добавить CSS-код

img{ display:inline-block; }

Смежные вопросы