【问题标题】:Bootstrap 3 Animated Column ResizingBootstrap 3 动画列调整大小
【发布时间】:2014-07-10 16:43:20
【问题描述】:

希望在这里稍微改进我的代码,并听取任何人的反馈以提供帮助。

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

问题:当我切换侧边栏时,内容区域偶尔会跳跃而不是平滑地扩展/收缩。这不是 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。

谢谢:)

【问题讨论】:

    标签: jquery css twitter-bootstrap animation twitter-bootstrap-3


    【解决方案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;
    }
    

    【讨论】:

    • 除此之外,删除 height:0px 效果很好。谢谢。我显然已经盯着这个太久了:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-06-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多