这是一个想法：它应该是6个盒子（三个一行），假设它应该是大型视口，每个div应该有类col-lg-4：
------- ------- -------
| | | |
| A | B | C |
| | | |
------- ------- -------
| | | |
| D | E | F |
| | | |
------- ------- -------
当用户点击框时，应该切换并展开以占据整行。其余的div应该像下面的示例一样被拉或向上/向下推。
假设：
div会扩展（可以通过col-lg-4用jquery替换类col-lg-12来完成）
只能同时扩展一个div
图例：
A延长：
------- ------- -------
| |
| A' |
| |
------- ------- -------
| | | |
| B | C | D |
| | | |
------- ------- -------
| | |
| E | F |
| | |
------- -------
B延长：
------- ------- -------
| |
| B' |
| |
------- ------- -------
| | | |
| A | C | D |
| | | |
------- ------- -------
| | |
| E | F |
| | |
------- -------
C延长：
------- ------- -------
| |
| C' |
| |
------- ------- -------
| | | |
| A | B | D |
| | | |
------- ------- -------
| | |
| E | F |
| | |
------- -------
D延长：
------- ------- -------
| | | |
| A | B | C |
| | | |
------- ------- -------
| |
| D' |
| |
------- ------- -------
| | |
| E | F |
| | |
------- -------
E延长：
------- ------- -------
| | | |
| A | B | C |
| | | |
------- ------- -------
| |
| E' |
| |
------- ------- -------
| | |
| D | F |
| | |
------- -------
F延长：
（...）
我尝试使用类col-lg-[push|pull]-n，但问题似乎是在行中向上/向下移动div。
我将不胜感激任何建议。
答案 0 :(得分：0)
你应该分享你到目前为止所尝试的内容，但根据你的描述和stackoverflow的众神怜悯，我会建议这个答案。
注意事项：
我使用了find.W.stoch <- function(n=50,alpha=0.05,N=200000,.progress="none") {
d <- plyr::raply(N,.Call(stats:::C_SWilk,sort(rnorm(n))),
.progress=.progress)
return(quantile(d[1,],1-alpha))
}
个类，因此它可以显示在代码段预览视口中。您只需将所有 SW1965 <- c(0.767,0.748,0.762,0.788,0.803,0.818,0.829,0.842,
0.850,0.859,0.866,0.874,0.881,0.887,0.892,0.897,0.901,0.905,
0.908,0.911,0.914,0.916,0.918,0.920,0.923,0.924,0.926,0.927,
0.929,0.930,0.931,0.933,0.934,0.935,0.936,0.938,0.939,0.940,
0.941,0.942,0.943,0.944,0.945,0.945,0.946,0.947,0.947,0.947)
Rapprox <- sapply(3:50,find.W,alpha=0.05)
Rapprox.stoch <- sapply(3:50,find.W.stoch,alpha=0.05,.progress="text")
par(bty="l",las=1)
matplot(3:50,cbind(SW1965,Rapprox,Rapprox.stoch),col=c(1,2,4),
type="l",
xlab="n",ylab=~W[crit])
legend("bottomright",col=c(1,2,4),lty=1:3,
c("SW orig","R approx","stoch"))
添加/更改为col-xs-*和/或col-xs-*，无论您希望使用哪个。
要关闭展开的col-md-*项，只需再次点击它。
col-lg-*div$(".itemA").on("click", function() {
var isExpanded = $(this).hasClass("col-xs-12");
//if expanded already toggle back to col-xs-4
if (isExpanded) {
$(this).addClass("col-xs-4");
$(this).removeClass("col-xs-12");
//insert before next item
$(this).insertBefore(".itemB");
} else {
//remove any other expanded item
$(".col-xs-12").not(this).removeClass("col-xs-12").addClass("col-xs-4");
$(this).addClass("col-xs-12");
$(this).removeClass("col-xs-4");
//insert as first expanded item
$(this).insertBefore(".itemB");
//place expanded item above
$(".itemB").insertAfter(".itemA");
//push the rest of items
$(".itemC").insertAfter(".itemB");
$(".itemD").insertAfter(".itemC");
$(".itemE").insertAfter(".itemD");
$(".itemF").insertAfter(".itemE");
}
});
$(".itemB").on("click", function() {
var isExpanded = $(this).hasClass("col-xs-12");
//if expanded already toggle back to normal
if (isExpanded) {
$(this).addClass("col-xs-4");
$(this).removeClass("col-xs-12");
//insert before next item
$(this).insertBefore(".itemC");
} else {
//remove any other expanded item
$(".col-xs-12").not(this).removeClass("col-xs-12").addClass("col-xs-4");
$(this).addClass("col-xs-12");
$(this).removeClass("col-xs-4");
//insert as first expanded item
$(this).insertBefore(".itemA");
//place expanded item above
$(".itemA").insertAfter(".itemB");
//push the rest of items
$(".itemC").insertAfter(".itemA");
$(".itemD").insertAfter(".itemC");
$(".itemE").insertAfter(".itemD");
$(".itemF").insertAfter(".itemE");
}
});
$(".itemC").on("click", function() {
var isExpanded = $(this).hasClass("col-xs-12");
//if expanded already toggle back to normal
if (isExpanded) {
$(this).addClass("col-xs-4");
$(this).removeClass("col-xs-12");
//insert before next item
$(this).insertBefore(".itemD");
} else {
//remove any other expanded item
$(".col-xs-12").not(this).removeClass("col-xs-12").addClass("col-xs-4");
$(this).addClass("col-xs-12");
$(this).removeClass("col-xs-4");
//insert as first expanded item
$(this).insertBefore(".itemA");
//place expanded item above
$(".itemA").insertAfter(".itemC");
//push the rest of items
$(".itemB").insertAfter(".itemA");
$(".itemD").insertAfter(".itemB");
$(".itemE").insertAfter(".itemD");
$(".itemF").insertAfter(".itemE");
}
});
$(".itemD").on("click", function() {
var isExpanded = $(this).hasClass("col-xs-12");
//if expanded already toggle back to normal
if (isExpanded) {
$(this).addClass("col-xs-4");
$(this).removeClass("col-xs-12");
//insert before next item
$(this).insertBefore(".itemE");
} else {
//remove any other expanded item
$(".col-xs-12").not(this).removeClass("col-xs-12").addClass("col-xs-4");
$(this).addClass("col-xs-12");
$(this).removeClass("col-xs-4");
//place expanded in second row
$(this).insertBefore(".itemE");
//push the rest of items
$(".itemB").insertAfter(".itemA");
$(".itemC").insertAfter(".itemB");
$(".itemE").insertAfter(".itemD");
$(".itemF").insertAfter(".itemE");
}
});
$(".itemE").on("click", function() {
var isExpanded = $(this).hasClass("col-xs-12");
//if expanded already toggle back to normal
if (isExpanded) {
$(this).addClass("col-xs-4");
$(this).removeClass("col-xs-12");
//insert before next item
$(this).insertBefore(".itemF");
} else {
//remove any other expanded item
$(".col-xs-12").not(this).removeClass("col-xs-12").addClass("col-xs-4");
$(this).addClass("col-xs-12");
$(this).removeClass("col-xs-4");
//place expanded in second row
$(this).insertAfter(".itemD");
//push the rest of items
$(".itemB").insertAfter(".itemA");
$(".itemC").insertAfter(".itemB");
$(".itemD").insertAfter(".itemE");
$(".itemF").insertAfter(".itemD");
}
});
$(".itemF").on("click", function() {
var isExpanded = $(this).hasClass("col-xs-12");
//if expanded already toggle back to normal
if (isExpanded) {
$(this).addClass("col-xs-4");
$(this).removeClass("col-xs-12");
//insert before next item
$(this).insertAfter(".itemE");
} else {
//remove any other expanded item
$(".col-xs-12").not(this).removeClass("col-xs-12").addClass("col-xs-4");
$(this).addClass("col-xs-12");
$(this).removeClass("col-xs-4");
//place expanded in second row
$(this).insertAfter(".itemD");
//push the rest of items
$(".itemB").insertAfter(".itemA");
$(".itemC").insertAfter(".itemB");
$(".itemD").insertAfter(".itemF");
$(".itemE").insertAfter(".itemD");
}
});
答案 1 :(得分：0)
不使用Bootstrap推拉，更简单的解决方案是使用flexbox。这样，只有1个类和顺序通过jQuery更改。这与Bootstrap一起使用，是DRY，可以用于无限数量的列。
.flex {
flex-wrap: wrap;
}
.flex>div {
display: flex;
float: none;
flex: 0 0 33.333333%;
max-width: 33.333333%;
order: 0;
}
.flex>.active {
max-width: 100%;
flex: 0 0 100%;
}
使用Javascript：
$('.flex>.col-md-4').click(function(){
var idx = $(this).index();
//set natural order
$('.flex>.col-md-4').each(function(i,e){
$(this).css('order',i+1);
});
// change active
$('.active').toggleClass('active');
$(this).toggleClass('active');
$(this).css('order',Math.abs(idx%3-idx));
});