Question

我是bootstrap的新手。我有两个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>

Answer 1

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

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

Answer 2

ng-class =＆＃34; {＆＃39; col-md-9＆＃39;：isHiding！= true}＆＃34; ng-class =＆＃34; {＆＃39; col-md-12＆＃39;：isHiding == true}＆＃34;

你可以这样使用..

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

2 个答案: