Bootstrap 在两列行中切换左列

Question

我想使用 Bootstrap 3.x 为中间页面内容创建一行两列。我尝试了 off canavas，但根据未回答的问题 here.

，它没有按我的情况预期地工作

我希望左列在 md 和更高版本上正常显示，然后在 xs 和 sm 设备上隐藏和显示一个切换按钮，并且列的切换应该应用宽度动画以显示漂亮的列推拉。

HTML

<div class="container-fluid">
<div class="row-fluid">
    <div id="col1" class="col-xs-3">Left Col</div>
    <div id="col2" class="col-xs-9">
        Right Col
        <a id="trig" class="btn btn-inverse">Reflow Me</a>
    </div>

  </div>
</div>

CSS

.row-fluid div {
    height: 200px;
    -webkit-transition: width 0.3s ease, margin 0.3s ease;
    -moz-transition: width 0.3s ease, margin 0.3s ease;
    -o-transition: width 0.3s ease, margin 0.3s ease;
    transition: width 0.3s ease, margin 0.3s ease;
}

.row-fluid .col-0 {
    width: 0%;

}

#col1 {
    background-color: #A6BFBA;
}

#col2 {
    background-color: #DE4124;
}

#trig {
    margin: 50px;
}

.row-fluid .col-0 + [class*="span"]{
    margin-left: 0;
}

JS

$('#trig').on('click', function () {
    $('#col1').toggleClass('col-0 col-xs-3');
    $('#col2').toggleClass('col-xs-12 col-xs-9');
});

Answer 1

这里似乎有几个问题。首先，您使用的是遗留代码。带有 "span" 的任何内容都是旧的 Bootstrap 2 代码。其次，您还需要过渡填充。如果没有填充填充，它会跳得有点丑。最后，您还需要像普通列一样浮动 col-0。

更新了 CSS 和下面的演示：

.row-fluid div {
    height: 200px;
    -webkit-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    -moz-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    -o-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}

.row-fluid .col-0 {
    width: 0%;
    float:left;
}

...

.row-fluid .col-0 + [class*="col"]{
    margin-left: 0;
}

http://fiddle.jshell.net/fv2jvbgL/

Bootstrap 在两列行中切换左列

Bootstrap toggle left column in a two column row

html

css

jquery

twitter-bootstrap