Bootstrap 3动画列调整大小

Question

希望能在这里改进我​​的代码并接受任何人的反馈。

我有一个按钮，点击后会隐藏/显示侧边栏。

问题：当我切换侧边栏时，内容区域偶尔会跳跃而不是平滑地扩展/收缩。这不是100％的时间，所以我很难诊断原因。

这是我的jsFiddle，我正在玩弄它。

http://jsfiddle.net/ryhollingsworth/Vb74j/

发生了什么：

$('#toggler').on('click', function(e) {
    e.preventDefault();
    $('#content').toggleClass('col-sm-12 col-sm-9');             
    $('#sidebar').toggleClass('col-sm-3 col-sm-0');
});

简单地交换列宽。我创建了一个新的col-sm-0列类。

谢谢：）

Answer 1

分配.col-sm-0一个min-height: 1px（就像Bootstrap为其列所做的那样），并删除height: 0px样式。

http://jsfiddle.net/mblase75/4aTnN/

.col-sm-0 {
    width: 0px;
    float: left;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    min-height: 1px;
}