Okay, so fand ich diese answer aber ich konnte die Ränder nicht loswerden, also wenn jemand die Lösung dafür hat. Ich möchte dieses Gitter Layout ohne Ränder zwischen jeder Box machen.Bootstrap Grid Layout ohne Ränder
Benutzer .row die Ränder entfernen
.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">
\t <div class="row">
\t \t <div class="col-md-8 col-sm-8">
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-8 col-sm-8 box" id="box-1"></div>
\t \t \t \t <div class="col-md-4 col-sm-4 box" id="box-2"></div>
\t \t \t \t <div class="col-md-4 col-sm-4 box" id="box-3"></div>
\t \t \t \t <div class="col-md-8 col-sm-8 box" id="box-4"></div>
\t \t \t </div>
\t \t </div>
\t \t <div class="col-md-4 col-sm-4 box" id="box-5">
\t \t </div>
\t </div>
</div>Zu diesem Zweck müssen Sie einige paddings und versuchen, löschen flexbox so zu verwenden, dass box-5 nimmt eine Höhe von allen linken Boxen. Damit, selbst wenn die Höhe der linken Kästen zunimmt, wird die Höhe box-5 verhältnismäßig zunehmen.
Ihre HTML-Beispiel
<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>
Ihr wird relativ CSS sein
/* 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}