Question

我有两列（其中一列可以隐藏）并尝试调整第二列的大小，当第一列被隐藏时。

<div class="row">
   <div class="col-sm-3 col-lg-2 ms-dialogHidden">
      content1
   </div>
    <div class="col-sm-9 col-lg-10">
      content2
    </div>
</div>

当我隐藏第一个时，我想像这样重新调整第二个：

<div class="row">
   <div class="col-sm-3 col-lg-2 ms-dialogHidden">
       content1
   </div>
   <div class="col-sm-12 col-lg-12">
       content2
   </div>
</div>

任何人都可以帮助我吗？

谢谢！

Answer 1

只需使用.toggleClass()在类之间切换，假设您有一个显示/隐藏左栏的按钮：

$('#hideLeft').click(function() {
  $('#left').toggleClass('col-sm-0 col-sm-3');
  $('#right').toggleClass('col-sm-9 col-sm-12');
});

这显示了如何实现这一点，甚至用动画来实现（我使用了类col-xs-*，因为小提琴窗口的大小更小：https://jsfiddle.net/DTcHh/8789/

Answer 2

我认为应该这样做：

<div class="row">
   <div id="first" class="col-sm-3 col-lg-2 ms-dialogHidden">
       content1
   </div>
   <div id="second" class="col-sm-12 col-lg-12">
       content2
   </div>
</div>

和jquery来处理html。

if($("#first").hasClass(ms-dialogHidden)){
    $("#second").removeClass().end().addClass("col-sm-12 col-lg-12")
}

可调整大小的动态Bootstrap列

2 个答案: