Magazin Style Grid mit Bootstrap - Twitter-Bootstrap, Bootstrap-4, Grid-Layout

Ich möchte eine Website im Magazinstil erstellen und vorzugsweise mit Bootstrap (wenn das möglich ist). Ich möchte, dass es so aussieht:

Kann mir jemand sagen, ob es möglich ist, so etwas mit Bootstrap zu machen? Wenn nicht vielleicht jemand mir sagen kann, ob es eine gute Alternative gibt. Vielen Dank im Voraus.

Antworten:

mach es so:

<div class="container">
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
</div>

Sie müssen möglicherweise die Höhe für die col-sm-8 "s einstellen, damit sie genau gleich aussieht.

Bootstrap Grid wird verwendet, um ein flüssiges Layout zu erstellen. Es verwendet eine Reihe von Containern, Zeilen und Spalten, um Inhalt zu strukturieren und auszurichten. In diesem Beispiel kann das HTML-Layout wie folgt aussehen.

 <style>
.box{
display: block;
position: relative;
width: 100%;
height: 200px;
}
.left{
float: left;
}
.right{
float: right;
}
</style>
<div class="row">
<div class="row">
<div class="col-sm-6 box">

</div>
<div class="col-sm-6 box"></div>
</div>
<div class="row">
<div class="col-sm-8 right box">

</div>
<div class="col-sm-8 right box">

</div>
<div class="col-sm-4 left box">

</div>
</div>
<div class="row">
<div class="col-sm-12 box">

</div>
</div>
</div>