Question

我正在尝试在容器和容器流体之间进行平滑的引导容器转换，反之亦然。转换在列上正常工作，但在容器上不能正常工作。

下面是我的代码示例，其中转换仅适用于列，而不适用于容器。有什么问题？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
        .animation {
            flex-grow: 1;
            /*transition: all 400ms ease;*/

            -webkit-transition: all 400ms ease;
            -moz-transition: all 400ms ease;
            -o-transition: all 400ms ease;
            transition: all 400ms ease;
        }
    </style>
</head>
<body>

<div class="animation container px-5 py-5" id="main" style="background: green;">
    <div class="row">
        <div id="col1" class="animation col-md-8" style="background: red;">col1</div>
        <div id="col2" class="animation col-md-4" style="background: blue;">col2</div>
    </div>
</div>
<button onclick="changecontainers()">change containers</button>
<button onclick="changecolumns()">change columns</button>

<script>

    var containerv = 1;
    var columns = 1;

    var container = document.getElementById("main");
    var col1 = document.getElementById("col1");
    var col2 = document.getElementById("col2");


    function changecontainers()
    {
        if (containerv)
        {
            container.classList.remove('container');
            container.classList.add("container-fluid");

            containerv = 0;
        }
        else
        {
            container.classList.remove('container-fluid');
            container.classList.add("container");

            containerv = 1;
        }
    }

    function changecolumns()
    {
        if (columns)
        {
            col1.classList.remove('col-md-8');
            col1.classList.add("col-md-4");

            col2.classList.remove('col-md-4');
            col2.classList.add("col-md-8");

            columns = 0;
        }
        else
        {
            col1.classList.remove('col-md-4');
            col1.classList.add("col-md-8");

            col2.classList.add("col-md-4");
            col2.classList.remove('col-md-8');

            columns = 1;
        }
    }
</script>
</body>
</html>

这段代码在那里：https://jsfiddle.net/9r7e25mm/

Answer 1

在小提琴中，页面是iframe。由于其大小很小，请使用cols - col-sm-*而不是col-md-*。如果您使用md列复制代码并在浏览器中作为单独的文件加载，它将起作用。如果类指定的大小大于视口，则列将不会堆叠视口。您需要查看grid system in bootstrap

网格列最多可以添加12行。更重要的是，无论视口是什么，列都会堆叠。（来源：W3Schools）

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style>
            .animation {
                flex-grow: 1;
                /*transition: all 400ms ease;*/

                -webkit-transition: all 400ms ease;
                -moz-transition: all 400ms ease;
                -o-transition: all 400ms ease;
                transition: all 400ms ease;
            }
        </style>
    </head>
    <body>

    <div class="animation container px-5 py-5" id="main" style="background: green;">
        <div class="row">
            <div id="col1" class="animation col-sm-8" style="background: red;">col1</div>
            <div id="col2" class="animation col-sm-4" style="background: blue;">col2</div>
        </div>
    </div>
    <button onclick="changecontainers()">change containers</button>
    <button onclick="changecolumns()">change columns</button>

    <script>

        var containerv = 1;
        var columns = 1;

        var container = document.getElementById("main");
        var col1 = document.getElementById("col1");
        var col2 = document.getElementById("col2");


        function changecontainers()
        {
            if (containerv)
            {
                container.classList.remove('container');
                container.classList.add("container-fluid");

                containerv = 0;
            }
            else
            {
                container.classList.remove('container-fluid');
                container.classList.add("container");

                containerv = 1;
            }
        }

        function changecolumns()
        {
            if (columns)
            {
                col1.classList.remove('col-sm-8');
                col1.classList.add("col-sm-4");

                col2.classList.remove('col-sm-4');
                col2.classList.add("col-sm-8");

                columns = 0;
            }
            else
            {
                col1.classList.remove('col-sm-4');
                col1.classList.add("col-sm-8");

                col2.classList.add("col-sm-4");
                col2.classList.remove('col-sm-8');

                columns = 1;
            }
        }
    </script>
    </body>
    </html>

Answer 2

这是因为要设置元素的宽度，container类使用属性max-width，而container-fluid使用width。无法为两个不同属性之间的过渡设置动画。作为解决方法，您可以创建其他类container-full-width来设置max-width: 100% !important并添加它，以代替container-fluid（或作为其补充）。

为什么我的转换不适用于Bootstrap容器？

2 个答案: