使用引导程序隐藏/显示列按需3

Question

我有一个Bootstrap网站与8列/ 4列设置。

在大屏幕上，我希望能够按需要隐藏/显示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>