为什么我的过渡不适用于 Bootstrap 容器？答案

【问题标题】：Why don't my transitions work on Bootstrap containers?为什么我的过渡不适用于 Bootstrap 容器？
【发布时间】：2018-07-04 19:30:53
【问题描述】：

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

下面是我的代码示例，其中转换仅适用于列，不适用于容器。怎么了？

<!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/

【问题讨论】：

标签： css twitter-bootstrap css-transitions

【解决方案1】：

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

【讨论】：

【解决方案2】：

在小提琴中，页面是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>

【讨论】：

但我的问题根本不是网格系统。 col-md 只是一个转换的例子，我的意思是转换在列上正常工作，但它不适用于用 container-fluid 替换容器