列弹性重叠后的 IE 11 元素

【问题标题】：IE 11 element after column flex overlap列弹性重叠后的 IE 11 元素
【发布时间】：2020-11-29 20:51:38
【问题描述】：

我试图了解这在 IE 11 上哪里出错了。

我的页脚与页面的主要内容重叠，其中主要内容没有固定的高度，因为填充它的项目可能会有所不同。这在 chrome 上看起来很棒，但在 IE 11 上重叠。 这是一个 sn-p 和一个 jsbin link.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <style>
        html,
        body {
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
        }

        .navbar {
            margin-bottom: 15px !important;
            position: relative;
        }

        .clearfix:before,
        .clearfix:after,
        .dl-horizontal dd:before,
        .dl-horizontal dd:after,
        .container:before,
        .container:after,
        .container-fluid:before,
        .container-fluid:after,
        .row:before,
        .row:after,
        .form-horizontal .form-group:before,
        .form-horizontal .form-group:after,
        .nav:before,
        .nav:after,
        .navbar:before,
        .navbar:after,
        .navbar-header:before,
        .navbar-header:after,
        .navbar-collapse:before,
        .navbar-collapse:after,
        .pager:before,
        .pager:after {
            content: " ";
            display: table;
        }

        .navbar-header {
            float: left;
        }

        #masthead .navbar-header .logo {
            width: 266px;
            height: 70px;
            display: block;
        }

        #footer {
            background-color: antiquewhite;
        }

        .breadcrumbs {
            list-style-type: none;
            vertical-align: top;
        }
    </style>
</head>

<body role="document" class="d-flex flex-column">
    <nav id="masthead" class="navbar navbar-default" role="banner">
        <div class="navbar-header">
            <a class="logo">stuff here ....</a>
        </div>
    </nav>

    <div class="container-fluid flex-fill w-100 pb-3 border border-primary">

        <div class="d-flex flex-column">

            <div class="breadcrumbs">
                whatevs...
            </div>

            <div class="row">
                <div class="col-xs-12 col-md-8 d-flex flex-column">

                    <div class="text-h1a px-2 my-3 mt-md-5 mb-md-0">
                        <h1 class="m-0 mt-1 font-size-24px">Hello</h1>
                        <div class="d-flex flex-column flex-md-row">
                            <div class="flex-fill font-size-14px font-size-sm-16px">
                                <span>there</span>
                                <span class="ml-2">general kenobi</span>
                            </div>
                        </div>
                    </div>


                    <div class="mt-2 mt-md-0">
                        something here
                        and another thing here
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        did we forget about this?
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.


                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                    </div>
                </div>

                <div class="col-xs-12 col-md-4 pr-md-0">
                    SIDE Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                    cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                    ipsam sapiente dolorum tenetur vel distinctio.
                </div>

            </div>

        </div>


    </div>

    <footer id="footer">
        <div class="container-fluid mw-100">
            <ul>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
            </ul>
        </div>
    </footer>
</body>

</html>

寻找解决方案以及一些文档以了解并希望能够在未来帮助其他人解决类似问题。谢谢。

【问题讨论】：

  • !important 应有充分的理由并尽可能少地使用。 height:100% on body 是 IE11 严格适用的。删除它并将其最终变成min-height。也删除!important。它可能是相似的：jsbin.com/vuhaxoniqi/1/edit?html,output
  • 在我的屏幕上看起来不错。你的屏幕分辨率是多少？
  • @MariosNikolaou 1680x939 & 1366x657
  • G-Cyrillus 和 gpl 的答案都是正确的，并且在 IE 中运行良好。你可以选择一个接受。 body 上的 height: 100% !important; 是问题的主要原因。只删除该行也可以解决问题。
  • @G-Cyrillus 是的，谢谢，身高是个问题。你能给我指出一些关于这方面的好文档吗？我开始涉足 UI

标签： html css twitter-bootstrap flexbox internet-explorer-11


【解决方案1】：

查看此代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <style>
        html,
        body {
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
        }

        .navbar {
            margin-bottom: 15px !important;
            position: relative;
        }

        .clearfix:before,
        .clearfix:after,
        .dl-horizontal dd:before,
        .dl-horizontal dd:after,
        .container:before,
        .container:after,
        .container-fluid:before,
        .container-fluid:after,
        .row:before,
        .row:after,
        .form-horizontal .form-group:before,
        .form-horizontal .form-group:after,
        .nav:before,
        .nav:after,
        .navbar:before,
        .navbar:after,
        .navbar-header:before,
        .navbar-header:after,
        .navbar-collapse:before,
        .navbar-collapse:after,
        .pager:before,
        .pager:after {
            content: " ";
            display: table;
        }

        .navbar-header {
            float: left;
        }

        #masthead .navbar-header .logo {
            width: 266px;
            height: 70px;
            display: block;
        }

        #footer {
            background-color: antiquewhite;
        }

        .breadcrumbs {
            list-style-type: none;
            vertical-align: top;
        }
    </style>
</head>

<body role="document" class="d-flex flex-column">
    <nav id="masthead" class="navbar navbar-default" role="banner">
        <div class="navbar-header">
            <a class="logo">stuff here ....</a>
        </div>
    </nav>

    <div class="container-fluid flex-fill w-100 pb-3 border border-primary">

        <div class="d-flex flex-column">

            <div class="breadcrumbs">
                whatevs...
            </div>

            <div class="row">
                <div class="col-xs-12 col-md-8 d-flex flex-column">

                    <div class="text-h1a px-2 my-3 mt-md-5 mb-md-0">
                        <h1 class="m-0 mt-1 font-size-24px">Hello</h1>
                        <div class="d-flex flex-column flex-md-row">
                            <div class="flex-fill font-size-14px font-size-sm-16px">
                                <span>there</span>
                                <span class="ml-2">general kenobi</span>
                            </div>
                        </div>
                    </div>


                    <div class="mt-2 mt-md-0">
                        something here
                        and another thing here
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        did we forget about this?
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.


                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                    </div>
                </div>

                <div class="col-xs-12 col-md-4 pr-md-0">
                    SIDE Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                    cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                    ipsam sapiente dolorum tenetur vel distinctio.
                </div>

            </div>

        </div>


    </div>



    <footer id="footer">
        <div class="container-fluid mw-100 row">
            <ul>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
            </ul>
        </div>
    </footer>
</body>

</html>

您需要从正文样式中删除height: 100% !important;。

【讨论】：

  • 这确实有效。谢谢你。为了找到有关此的良好文档，您会指出我在哪里？对 UI 游戏来说相当新。
【解决方案2】：

从教程中将 flex 行布局更改为基于列的 flex 容器，您应该添加类 d-flex, flex-column, my-flex-container-column。

你的解决方案只有

&lt;body role="document" class="d-flex flex-column"&gt;

所以，换成

class="d-flex flex-column my-flex-container-column"

很高兴阅读tutorial

!important 应该很少使用，并且只有在您覆盖现有的 css 属性时才使用。两种分辨率都经过测试。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <style>
        html,
        body {
            width:100%;
            height:100%;
            margin: 0;
            padding: 0;
            border: 0;
        }

        .navbar {
            margin-bottom: 15px;
            position: relative;
        }

        .clearfix:before,
        .clearfix:after,
        .dl-horizontal dd:before,
        .dl-horizontal dd:after,
        .container:before,
        .container:after,
        .container-fluid:before,
        .container-fluid:after,
        .row:before,
        .row:after,
        .form-horizontal .form-group:before,
        .form-horizontal .form-group:after,
        .nav:before,
        .nav:after,
        .navbar:before,
        .navbar:after,
        .navbar-header:before,
        .navbar-header:after,
        .navbar-collapse:before,
        .navbar-collapse:after,
        .pager:before,
        .pager:after {
            content: " ";
            display: table;
        }

        .navbar-header {
            float: left;
        }

        #masthead .navbar-header .logo {
            width: 266px;
            height: 70px;
            display: block;
        }

        #footer {
            background-color: antiquewhite;
        }

        .breadcrumbs {
            list-style-type: none;
            vertical-align: top;
        }
    </style>
</head>

<body role="document" class="d-flex flex-column my-flex-container-column">
    <nav id="masthead" class="navbar navbar-default" role="banner">
        <div class="navbar-header">
            <a class="logo">stuff here ....</a>
        </div>
    </nav>

    <div class="container-fluid flex-fill w-100 pb-3 border border-primary">

        <div class="d-flex flex-column">

            <div class="breadcrumbs">
                whatevs...
            </div>

            <div class="row">
                <div class="col-xs-12 col-md-8 d-flex flex-column">

                    <div class="text-h1a px-2 my-3 mt-md-5 mb-md-0">
                        <h1 class="m-0 mt-1 font-size-24px">Hello</h1>
                        <div class="d-flex flex-column flex-md-row">
                            <div class="flex-fill font-size-14px font-size-sm-16px">
                                <span>there</span>
                                <span class="ml-2">general kenobi</span>
                            </div>
                        </div>
                    </div>


                    <div class="mt-2 mt-md-0">
                        something here
                        and another thing here
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        did we forget about this?
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.


                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                    </div>
                </div>

                <div class="col-xs-12 col-md-4 pr-md-0">
                    SIDE Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                    cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                    ipsam sapiente dolorum tenetur vel distinctio.
                </div>

            </div>

        </div>


    </div>

    <footer id="footer">
        <div class="container-fluid mw-100">
            <ul>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
            </ul>
        </div>
    </footer>
</body>

</html>

【讨论】：

  • 我假设 my-flex-container-column 与您提供的教程中的相同？顺便说一句，谢谢你的链接，我在写这篇文章时正在阅读它
  • @bgi 是的，如果你想将 body 标签的子元素作为列，那么你应该在 body 类中添加一个。本教程通过示例对其进行了展示，如果这是您想要的，它是更好的解决方案。
  • @bgi 我不认为这是height 的问题。如果你从你的 body 中删除类，你会注意到它可以与 height and width 设置为 100%
猜你喜欢
  • 2019-08-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-06-05
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode