html - 将 Bootstrap 与无响应的 div 内容混合？

Question

我的老板要求我使用 bootstrap 更新我们网站的一部分，但只是标题。我在标题中使用静态导航栏，而页面的其余部分是一团乱七八糟的汤(我认为该网站是 10 年前写的)。现在代码的结构是这样的:

<div class="container">
    < code for the navbar ></code for the navbar>
    <Table>
         <content of website>
    </Table>
</div>

它在桌面上看起来很棒，但在移动设备上它会分崩离析并放大到网站的左上角。您无法看到所有标题或网页的大约 65%。我正在使用:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在 Bootstrap 中重写页面不是一种选择，因为我们将在至少 165 个不同的 html 文件中重复使用这个 header 。所以我想我想问的是，是否可以将网页的非响应部分放入响应元素中，以便根据屏幕尺寸缩小内容？

干杯!

Answer 1

阻力最小的路线是将 table 包裹在 <div class="table-responsive"></div> 中，比如:

<div class="container">
    < code for the navbar ></code for the navbar>
    <div class="table-responsive">
        <table>
            <content of website>
        </table>
    </div>
</div>

这将使表格在移动设备上滚动。 See the docs here