引导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');
});

简单地交换列的宽度。我创建了一个新的class 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;
}