Question

我有一个Bootstrap网站，其中包含8列/ 4列设置。

在大型＆amp;中等屏幕，我希望能够按需隐藏/显示4列（菜单上有一个按钮）。隐藏时，我希望8列自动扩展到全宽（12列），反之亦然。

我该怎么做？

Answer 1

嗯......这是我能提出的最好的解决方案。如果有人能想到更好的，请告诉我。

       <p>
            <script type="text/javascript">
                function changeClass()
                {
                    var ElementCssClass = document.getElementById("main-column").className;

                    if ( ElementCssClass == "col-md-8 column" ) {
                        document.getElementById("main-column").className = "col-md-12 column";
                    }
                    else if ( ElementCssClass == "col-md-12 column" ) {
                        document.getElementById("main-column").className = "col-md-8 column";
                    }
                    ElementCssClass = "";
                    $('#side-column').toggle();
                }
            </script>
            <button class="button" onclick="changeClass();">Click to Show/Hide SideColumn</button>
        </p>

使用Bootstrap 3按需隐藏/显示列

1 个答案: