如何使divs堆栈没有空格和保持在较小的大小顺序 - 在Bootstrap [英] How to make divs stack without spaces and retain order on smaller sizes - in Bootstrap
问题描述
当我在一行中有2个div，每个都有不同的高度，所以下一行有。
< ; div class =row>
< div class =col-lg-6 col-md-6 col-sm-12> div 1< / div>
< div class =col-lg-6 col-md-6 col-sm-12> div 2< / div>
< / div>
< div class =row>
< div class =col-lg-6 col-md-6 col-sm-12> div 3< / div>
< div class =col-lg-6 col-md-6 col-sm-12> div 4< / div>
< / div>
但是当我删除行，将所有div放在1 div的左边，并且所有在右边的1 div，没有空格。
< div class =col-lg-6 col- md-6 col-sm-12>
< div> div 1< / div>
< div> div 3< / div>
< / div>
< div class =col-lg-6 col-md-6 col-sm-12>
< div> div 2< / div>
< div> div 4< / div>
< / div>
注意，它们不只是4个div，它们至少为8。
我希望这是清楚的。
修订答案
我已经在此答案的帮助下整理了一些代码
第一个答案
确定单个div高度，然后相应地调整边距（对于较大的布局！）;
ie
div 1 height = a，div 2 height = b
div diff =（ab）
div 4 top margin = -diff
else
div 3 top-margin = -diff;
但是你需要保持一个总数为奇数的div高度，编号为div的高度，并相应地进行调整。
我已经裁剪宽度来测试它。
< div class = row>
< div class =col-lg-6 col-sm-12style =height：100px;> DIV 1< / div>
< div class =col-lg-6 col-sm-12style =height：80px;> DIV 2< / div>
< div class =col-lg-6 col-sm-12style =height：50px; clear：left;> DIV 3< / div&
< div class =col-lg-6 col-sm-12style =height：40px;> DIV 4< / div>
< / div>
每隔三分之一清除。
css：
div {outline：solid 1px red; }
.row {
margin-right：2px;
margin-left：2px;
}
@media（min-width：500px）{
.container {
max-width：1170px;
}
.col-lg-6 {
max-width：50％;
width：50％;
float：left;
clear：right;
}
}
@media（min-width：150px）{
.container {
max-width：500px;
}
.col-sm-12 {
width：100％;
}
}
I really don't know how to put this in words.
When I have 2 divs in a row, each has different height, so the next row have unwanted space.
But stack correctly in small screen.
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12"> div 1 </div>
<div class="col-lg-6 col-md-6 col-sm-12"> div 2 </div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12"> div 3 </div>
<div class="col-lg-6 col-md-6 col-sm-12"> div 4 </div>
</div>
But when I remove the rows and put all divs on the left inside 1 div, and all on the right inside 1 div, there is no space.
But they stack in the wrong order on small screen.
<div class="col-lg-6 col-md-6 col-sm-12">
<div> div 1 </div>
<div> div 3 </div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div> div 2 </div>
<div> div 4 </div>
</div>
Note that they are not just 4 divs, they are at least 8.
I hope this is clear. I appreciate any help.
Revised answer
I have sorted out some code with the help of this answer http://stackoverflow.com/a/32565224/3956566
I have used a small width to demonstrate it, that is for you to customise. Also put any changes in css in a site.css file, not bootstrap and call the site.css after the bootstrap, so changes are overridden.
Css:
div {outline:solid 1px red; }
.left {
}
.right {
}
Html:
<div style="display:none">
<div id="1" class="left" style="height:100px;background-color:yellow;">DIV 1</div>
<div id="2" class="right" style="height:20px;">DIV 2</div>
<div id="3" class="left" style="height:50px;background-color:yellow;">DIV 3</div>
<div id="4" class="right" style="height:170px;">DIV 4</div>
<div id="5" class="left" style="height:120px;background-color:yellow;">DIV 5</div>
<div id="6" class="right" style="height:30px;">DIV 6</div>
<div id="7" class="left" style="height:50px;background-color:yellow;">DIV 7</div>
<div id="8" class="right" style="height:90px;">DIV 8</div>
</div>
<div id="div1" style="width: 50%;float:left;background-color:grey"></div>
<div id="div2" style="width: 50%;float:right;background-color:blue"></div>
<div id="div3" style="width: 100%;float:left;background-color:white"></div>
JQuery:
if ($(window).width() > 400) {
$('#div1').append($('.left'));
$('#div2').append($('.right'));
}
if ($(window).width() < 400) {
$('#div3').append($('#1'));
$('#div3').append($('#2'));
$('#div3').append($('#3'));
$('#div3').append($('#4'));
$('#div3').append($('#5'));
$('#div3').append($('#6'));
$('#div3').append($('#7'));
$('#div3').append($('#8'));
}
$('#div1').append($('.left'));
$('#div2').append($('.right'));
$( window ).resize(function() {
if($(window).width()>400){
$('#div1').append($('.left'));
$('#div2').append($('.right'));
}
if($(window).width()<400)
{
// These need to be added in order, as appending them to the
// first two divs reorders them.
$('#div3').append($('#1'));
$('#div3').append($('#2'));
$('#div3').append($('#3'));
$('#div3').append($('#4'));
$('#div3').append($('#5'));
$('#div3').append($('#6'));
$('#div3').append($('#7'));
$('#div3').append($('#8'));
}
});
See fiddle:
https://jsfiddle.net/kermit77/vo439fte/4/
First answer
Beyond putting in calculations determining individual div height and then adjusting margins accordingly (for the larger layouts only!);
i.e.
div 1 height = a, div 2 height = b
div diff = (a-b)
if diff >0
div 4 top margin = -diff
else
div 3 top-margin = -diff;
But you would need to keep a running total of odd numbered div heights and even numbered div heights and adjust accordingly.
I've trimmed down the widths to test it. You need to clear left on every 3rd div to prevent it being placed on the right hand side.
<div class="row">
<div class="col-lg-6 col-sm-12" style="height:100px;">DIV 1</div>
<div class="col-lg-6 col-sm-12" style="height:80px;">DIV 2</div>
<div class="col-lg-6 col-sm-12" style="height:50px;clear:left;">DIV 3</div>
<div class="col-lg-6 col-sm-12" style="height:40px;">DIV 4</div>
</div>
For every 3rd div clear left.
css:
div {outline:solid 1px red; }
.row {
margin-right: 2px;
margin-left: 2px;
}
@media (min-width: 500px) {
.container {
max-width: 1170px;
}
.col-lg-6 {
max-width:50%;
width: 50%;
float:left;
clear:right;
}
}
@media (min-width: 150px) {
.container {
max-width: 500px;
}
.col-sm-12 {
width: 100%;
}
}
这篇关于如何使divs堆栈没有空格和保持在较小的大小顺序 - 在Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
