Question

在我的应用程序中，我有一个构建所有其他的默认片段。它转录如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head th:include="fragments/common :: commonFragment">
<meta charset="UTF-8" />
<link rel="shortcut-icon" th:href="@{/assets/img/favicon.png}"  type="image/x-icon" />
<title th:text="#{app.name}"> </title>
<style> #sidebar-and-content { display: flex; height: 100vh; width: 100%; } .page-body { display: -webkit-flex; display: flex; height: 100vh; width: 100%; overflow: auto; } </style></head>
<body>
    <div th:id="defaultFragment" th:fragment="defaultFragment">
        <div id="header" th:replace="fragments/header :: headerFragment">   </div>
        <div class="main-container container-fluid">
            <div  id="sidebar-and-content" class="page-container">
                <div id="sidebar" th:replace="fragments/sidebar :: sidebarFragment"></div>
                <div id="content" class="page-content">
                    <div class="page-body">
                        <section layout:fragment="content"></section>
                    </div>
                </div>
            </div>
                <div th:replace="fragments/footer :: footerFragment"></div>
        </div>
    </div>
</body>
</html>

所有应用程序页面都是这样构建的：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorator="fragments/default">

<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>
<body>
    <div layout:fragment="content">
        <div class="container">
            <script type="text/javascript">
            </script>
        </div>
    </div>
</body>
</html>

在我的1920x1080笔记本电脑屏幕上说我有一张有很多行的表，大部分时间它都是正确构建的，但是在1366x768屏幕上它的构建就像下面的第一张图片一样：

有一个折叠侧边栏菜单的按钮。理想情况下，我希望现在更大的屏幕可以调整桌面大小。相反（再次在1366x768屏幕上）我得到以下内容：

知道这可能是一个CSS问题，但我该如何解决？

Answer 1

实际上，这是一个问题＆＃34;在数据表javascript中。在网站上阅读了一些内容之后，我发现了responsive扩展名。一旦我弄清楚它，它就像一个魅力。

css + thymeleaf - 如何自动调整显示的屏幕尺寸？

1 个答案: