Bootstrap切换两列中的左列 [英] Bootstrap toggle left column in a two column row
问题描述
我想使用Bootstrap 3.x为中间页面内容创建两行的行.我尝试了关闭canavas,但基于未回答的问题
I'd like to create a row of two columns for the middle page content using Bootstrap 3.x. I tried the off canavas but it did not work as expected for my case based on not answered question here.
这是我的 JS小提琴
我希望左列在md及更高版本上正常显示,然后在xs和sm设备上隐藏并显示切换按钮,并且列的切换应应用宽度动画以显示不错的列推拉力.
I want the left column to be displayed normal on md and above, then hide and display a toggle button on xs and sm devices and the toggle of the columns should apply width animation to show nice column push pull.
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');
});
推荐答案
在这里看起来像是几个问题.首先,您正在使用旧版代码.任何带有"span"的东西都是旧的Bootstrap 2代码.其次,您还需要过渡填充.如果不进行填充过渡,它会像丑陋的那样跳跃.最后,您还需要像普通列一样浮动col-0
.
Looks like a couple issues here. Firstly you're using legacy code. Anything with "span" is old Bootstrap 2 code. Secondly, you also need to transition padding. Without padding be transitioned, it jumps kind of ugly like. Lastly, you also need to float your col-0
like a normal column.
更新了以下CSS和演示:
Updated CSS and demo below:
.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切换两列中的左列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!