Question

好的，所以我发现了这个answer，但是我无法摆脱边缘，所以如果有人有解决方案的话。我希望这个网格布局在每个框之间没有边距。

Answer 1

为此目的，您必须清除一些paddings并尝试使用flexbox，以便box-5占据所有左框的高度。因此，即使左框的高度增加，box-5的高度也会相对增加。

您的示例HTML

<div class="main-wrapper"> 
    <div class="col-sm-8 left-wrapper">
        <div class="col-sm-7 smallbox box-1"> box1 </div>
        <div class="col-sm-5 smallbox box-2"> box2 </div>
        <div class="col-sm-5 smallbox box-3"> box3 </div>
        <div class="col-sm-7 smallbox box-4"> box4 </div>
    </div>
    <div class="col-sm-4 right-wrapper box-5"> box 5 </div>
</div>

您的相对CSS将

/* use of flex-box for equal height columns */
.main-wrapper{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.left-wrapper{padding:0}
.smallbox {color:#FFFFFF; min-height:100px;}
.box-1{ background:#c49a6c}
.box-2{ background:#bcbec0}
.box-3{ background:#9b8579}
.box-4{ background:#3c2415}
.box-5{ background:#726658;color:#FFF}

Answer 2

用户.row删除边距

＆＃13;

.box {
  height: 250px;
  padding: 0;
}

#box-1 {
  background: #c39a6f;
}

#box-2 {
  background: #bcbec0;
}

#box-3 {
  background: #9a857a;
}

#box-4 {
  background: #3b2416;
}

#box-5 {
  background: #726659;
  height: 500px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
	<div class="row">
		<div class="col-md-8 col-sm-8">
			<div class="row">
				<div class="col-md-8 col-sm-8 box" id="box-1"></div>
				<div class="col-md-4 col-sm-4 box" id="box-2"></div>
				<div class="col-md-4 col-sm-4 box" id="box-3"></div>
				<div class="col-md-8 col-sm-8 box" id="box-4"></div>
			</div>
		</div>
		<div class="col-md-4 col-sm-4 box" id="box-5">
		</div>
	</div>
</div>

＆＃13;

没有边距的Bootstrap网格布局

2 个答案: