嵌套的Bootsrap网格填充问题

如何解决嵌套的Bootsrap网格填充问题

我无法获得相同的填充形式的自定义嵌套网格。

在下面的代码段中，我向您显示所需的网格。我无法在所有框之间添加小间距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>