如何在引导 onClick 中更改容器 div 的宽度？答案

【问题标题】：How can I change the width of the container div in bootstrap onClick?如何在引导 onClick 中更改容器 div 的宽度？
【发布时间】：2015-12-17 00:30:47
【问题描述】：

我正在开发 Asp.Net MVC 项目。在我的 _Layout.cshtml 中，我将容器类用于我的主容器 div：

    <div class="container">
        @RenderBody()
        <hr />
        <footer>
        </footer>
    </div>

但是，对于我的一个页面，我有一个按钮，可以将容器的大小扩展到全屏宽度并返回（用户可以将宽度从默认切换到全屏宽度，反之亦然）。

container-fluid 类也有同样的想法，但我需要在单击按钮时即时进行。我怎样才能做到这一点？此外，有没有办法只为特定视图更改宽度而不影响其他页面（因为容器是在 _layout.cshtml 中定义的，它也会影响其他视图）？

【问题讨论】：

您想使用 vanilla javascript（或 jquery）从该元素中删除 container 类，并在其位置添加 container-fluid。单击按钮时来回切换。
交换类可以解决问题，但并不完美。出于某种原因，页面没有立即响应更改……有没有想过？

标签： javascript jquery css asp.net-mvc twitter-bootstrap

【解决方案1】：

对于所有容器：

$("#myButton").on('click', function(){
    $(".container").toggleClass("container-fluid");
});

仅适用于被点击按钮的父 .container

$("#myButton").on('click', function(){
    $(this).closest(".container").toggleClass("container-fluid");
});

如果您想将container-fluid 设置为提供的引导类之外的特定样式，您可以将其替换为您选择的类。

【讨论】：

它有点工作。但是在更新页面时遇到问题。它的膨胀和收缩不会立即发生。是否有强制页面/容器应用新 css 的方法？谢谢。

【解决方案2】：

做了一些实验后，我发现下面的代码对我来说很好用：

document.getElementById("elementId").className = "new_css_class_name";

它强制文档立即更新视图，这在上述解决方案的情况下是一个问题。

【讨论】：