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;
}