【问题标题】：Columns with a table at left and an image at right are not responsive左侧有表格，右侧有图像的列没有响应
【发布时间】：2018-07-28 22:29:42
【问题描述】：
我有以下使用 bootstrap 4 的代码。
我想将一行垂直拆分为 2 列。
左边有一个表格没有响应并显示一个垂直滚动条
在右边有一个比用户屏幕宽度更大的图像，它也没有响应，使整个页面向右滚动直到它到达图像的右端，而不是根据屏幕视图调整大小.
Codepen -> 在
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="container-fluid">
<h4>Title</h4>
<h3 class="about-villa">subtitle</h3>
<table class="table table-responsive">
<thead>
<tr>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-responsive">
</th>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-responsive">
</th>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-responsive">
</th>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-responsive">
</th>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-responsive">
</th>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-responsive">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Image title</td>
<td>Image title</td>
<td>Image title</td>
<td>Image title</td>
<td>Image title</td>
<td>Image title</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-6">
<img src="https://dummyimage.com/1980x700/b5b5b5/ffffff&text=right+image+to+fit/width" class="img-responsive">
</div>
</div>
</div>
【问题讨论】：
标签：
html
css
responsive
twitter-bootstrap-4
【解决方案1】：
Bootstrap 4 已将图像响应类从 img-responsive 更改为 img-fluid。
所以图像类应该是img-fluid。
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="container-fluid">
<h4>Title</h4>
<h3 class="about-villa">subtitle</h3>
<table class="table table-responsive">
<thead>
<tr>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-fluid">
</th>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-fluid">
</th>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-fluid">
</th>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-fluid">
</th>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-fluid">
</th>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-fluid">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Image title</td>
<td>Image title</td>
<td>Image title</td>
<td>Image title</td>
<td>Image title</td>
<td>Image title</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-6">
<img src="https://dummyimage.com/1980x700/b5b5b5/ffffff&text=right+image+to+fit/width" class="img-fluid">
</div>
</div>
</div>
【解决方案2】：
主要思想是创建两个 div 元素：一个用于左侧 (style="float:left;")，另一个用于右侧 (style="float:right")。然后将它们包装到一个 div 中。此外，为了管理 img 大小，您可以做一些事情喜欢style="height: auto; width: auto; max-width: 300px; max-height: 300px;"
所以我改变了你的例子：
<!DOCTYPE html>
<html>
<body>
<div >
<div class="container-fluid">
<div style="float: left;">
<h4>Title</h4>
<h3 class="about-villa">subtitle</h3>
<table style="float: left;">
<thead>
<tr>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-responsive">
</th>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-responsive">
</th>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-responsive">
</th>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-responsive">
</th>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-responsive">
</th>
<th>
<img src="https://dummyimage.com/170x120/b5b5b5/ffffff" class="img-responsive">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Image title</td>
<td>Image title</td>
<td>Image title</td>
<td>Image title</td>
<td>Image title</td>
<td>Image title</td>
</tr>
</tbody>
</table>
</div>
<div style="float: right;">
<img src="https://dummyimage.com/1980x700/b5b5b5/ffffff&text=right+image+to+fill+height/width" class="img-responsive" style="height: auto; width: auto; max-width: 300px; max-height: 300px;">
</div>
</div>
</div>
</body>
</html>
【解决方案3】：
您需要将您的表格包装到一个具有table-responsive 类的 div 中......在table 中使用table-responsive 不会做任何事情，因为overflow 不适用于table...... [Link]
并且 bootstrap4 中没有更多的 img-responsive 类，而是使用 img-fluid...[Link]
Codepen Link ▸