没有边距的引导网格布局[关闭]答案

【问题标题】：Bootstrap Grid Layout without margins [closed]没有边距的引导网格布局[关闭]
【发布时间】：2016-12-01 02:13:09
【问题描述】：

好的，所以我找到了这个answer，但我无法摆脱边缘，所以如果有人有这个解决方案。我想让这个网格布局在每个框之间没有边距。

Grid Layout

【问题讨论】：

标签： css twitter-bootstrap layout grid

【解决方案1】：

Check this fiddle here

为此，您必须清除一些paddings 并尝试使用flexbox，以便box-5 将占用所有左侧框的高度。这样，即使left box的高度增加，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}

【讨论】：

【解决方案2】：

用户 .row 删除边距

.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;
}

<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>

【讨论】：