左侧带有 table 且右侧带有图像的列没有响应

Question

我有以下代码使用 bootstrap 4.

我想垂直拆分 2 列的行。

左侧有一个 table 没有响应并显示垂直滚动条

右边有一个比用户屏幕宽度更大的图像，它也没有响应，使整个页面向右滚动直到到达图像的右端，而不是根据屏幕视图。

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

Answer 1

您需要将 table 包装成 div 具有 table-responsive class...在 table 中使用 table-responsive不会做任何事情，因为 overflow 不适用于 table...[Link]

并且bootstrap4中不再有img-responsive class，使用img-fluid代替...[Link]

Codepen Link ▸

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

Answer 3

Bootstrap 4 已将图像响应 class 从 img-responsive 更改为 img-fluid。

所以图像 class 应该是 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>

左侧带有 table 且右侧带有图像的列没有响应

Columns with a table at left and an image at right are not responsive

html

css

twitter-bootstrap-4

responsive