使用引导程序隐藏其他列时自动调整列宽答案

【问题标题】：Auto adjust column width upon hiding other column using bootstrap使用引导程序隐藏其他列时自动调整列宽
【发布时间】：2015-09-17 18:51:46
【问题描述】：

我是新手。我有两个 div，一个有 .col-9 css，另一个 div 有 .col-3 css。

因此，在隐藏 .col-3 div 后，我希望第一个 div 变为 .col-12 或以其他方式自动调整到该宽度。

这是代码：

<div class="row">
    <div  class="col-md-9"> **<!--div 1-->**
        <div class="panel panel-danger ">
            <div class="panel-heading">
                <button class="btn btn-danger ">Delete</button>
            </div>
            <div class="panel-body">
                <button class="btn btn-default margin_btn" > Sunglasses <i class="fa fa-close fa_elec " ></i></button>
                <button class="btn btn-default margin_btn" > Fragrances <i class="fa fa-close fa_elec " ></i></button>
                <button class="btn btn-default margin_btn" > Watches <i class="fa fa-close fa_elec " ></i></button>

            </div>
        </div>
    </div>
    <div  class="col-md-3" ng-hide="true"> **<!--div 2-->**
        <div class="panel panel-danger ">
            <div class="panel-heading">
                <button class="btn btn-danger ">Delete</button>
            </div>
            <div class="panel-body">
                <button class="btn btn-default margin_btn" > Sunglasses <i class="fa fa-close fa_elec " ></i></button>
                <button class="btn btn-default margin_btn" > Fragrances <i class="fa fa-close fa_elec " ></i></button>
                <button class="btn btn-default margin_btn" > Watches <i class="fa fa-close fa_elec " ></i></button>

            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： jquery css twitter-bootstrap

【解决方案1】：

ng-class="{'col-md-9': isHiding != true}" ng-class="{'col-md-12': isHiding == true}"

你可以这样使用..

【讨论】：

【解决方案2】：

向列添加 ID 并执行以下操作：

$('#button').click(function(){
   $('#3col').hide();
   $('#9col').removeClass("col-md-9").addClass("col-md-12");
});

【讨论】：