我使用bootstrap 4获得以下代码。
我想垂直拆分一行2列。
左边有一张表不响应，并显示一个垂直滚动条
右边有一个宽度大于用户屏幕的图像，它也没有响应性地运行，使整个页面向右滚动直到它到达图像的右端而不是调整大小根据屏幕视图。
Codepen - ＆gt;在大屏幕上检查＆lt; 1920px。
<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>
答案 0 :(得分：1)
您需要将表格换成包含table-responsive类的div ....在table-responsive中使用table将无法执行任何操作，因为overflow无效{ {1}} ... [Link]
并且bootstrap4中不再有table类使用img-responsive而是...... [Link]
答案 1 :(得分：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 :(得分：0)
主要思想是创建两个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>