问题描述
我无法获得相同的填充形式的自定义嵌套网格。
在下面的代码段中,我向您显示所需的网格。我无法在所有框之间添加小间距5px
。问题是,如果我更改自定义填充,那么我将无法保持框3和框4的高度与框1/2的高度相同。谁能提出一个好的解决方案?
.Box {
border-radius:20px;
border: 2px solid #000;
height: 100px;
vertical-align: middle;
text-align: center;
line-height: 100px;
}
.Box2 {
border-radius:20px;
border: 2px solid #000;
height: 50px;
vertical-align: middle;
text-align: center;
line-height: 50px;
}
.custom-padding{
padding: 0px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-6 Box custom-padding">1</div>
<div class="col-xs-3 Box custom-padding">2</div>
<div class="col-xs-3">
<div class="row">
<div class="col-xs-12 Box2 custom-padding">3</div>
<div class="col-xs-12 Box2 custom-padding">4</div>
</div>
</div>
</div>
解决方法
这可以通过对代码进行一些更改来完成。基本上,我已经为您的div创建了一个内部部分。造成了彼此分离的错觉,但实际上它们周围有白色边框,而内部div有黑色边框。
.box {
height: 100px;
vertical-align: middle;
text-align: center;
line-height: 100px;
border:5px solid #fff;
}
.box2 {
height: 50px;
vertical-align: middle;
text-align: center;
line-height: 50px;
position:relative;
border:5px solid #fff;
}
.custom-padding{
padding: 5px!important;
}
.inner{
border: 2px solid #000;
border-radius:20px;
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-6 box custom-padding"><div class="inner">1</div></div>
<div class="col-xs-3 box custom-padding"><div class="inner">2</div></div>
<div class="col-xs-3">
<div class="row">
<div class="col-xs-12 box2 custom-padding"><div class="inner">3</div></div>
<div class="col-xs-12 box2 custom-padding"><div class="inner">4</div></div>
</div>
</div>
</div>
,
您使用的是BS 3,并且类别行不包含display:flex
作为BS 4。
因此,我只需在您的第一个div class =“ row”中添加style =“ display:flex”,然后将利润自动添加到自定义填充类中。
在任何地方都具有空间的演示:
.box {
border-radius:20px;
border: 2px solid #000;
height: 100px;
vertical-align: middle;
text-align: center;
line-height: 100px;
}
.box2 {
border-radius:20px;
border: 2px solid #000;
height: 50px;
vertical-align: middle;
text-align: center;
line-height: 50px;
}
.custom-padding{
padding: 0px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div style="display:flex; max-width:100%; margin:0;" class="row">
<div style="margin:0 5px 0 0;" class="col-xs-6 box custom-padding">1</div>
<div style="margin:0 5px;" class="col-xs-3 box custom-padding">2</div>
<div style="display:flex; flex-wrap:wrap; margin:0 0 0 5px; padding:0;" class="col-xs-3 row">
<div style="margin-bottom:5px;" class="col-xs-12 box2 custom-padding">3</div>
<div class="col-xs-12 box2 custom-padding">4</div>
</div>
</div>
在任何地方都具有演示空间,并且3&4彼此相邻
.box {
border-radius:20px;
border: 2px solid #000;
height: 100px;
vertical-align: middle;
text-align: center;
line-height: 100px;
}
.box2 {
border-radius:20px;
border: 2px solid #000;
height: 100px;
vertical-align: middle;
text-align: center;
line-height: 100px;
}
.custom-padding{
padding: 0px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div style="display:flex; max-width:100%; margin:0;" class="row">
<div style="margin:0 5px 0 0;" class="col-xs-6 box custom-padding">1</div>
<div style="margin:0 5px;" class="col-xs-3 box custom-padding">2</div>
<div style="display:flex; flex-wrap:wrap; margin:0 0 0 5px; padding:0 0 0 5px;" class="col-xs-3 row">
<div style="margin:0 5px 0 -5px;" class="col-xs-6 box2 custom-padding">3</div>
<div class="col-xs-6 box2 custom-padding">4</div>
</div>
</div>