-2
Ich versuche, ein Layout mit drei gleichen Spalten zu machen. In der dritten Spalte möchte ich zwei Reihen von zwei gleich breiten Kästchen. Aus irgendeinem Grund decken die Spalten nicht die Breite von 1/3, sondern die gesamte Seitenbreite ab. Ich habe meinen HTML und relevanten CSS unten eingeschlossen. HierBootstrap-Spalte Divs decken die gesamte Breite des Containers statt nur die Spaltenbreite
<div id="about-me" class="container">
<div class="row">
<div class="sm-col-4 md-col-4 lg-col-4 xl-col-4"></div>
<div class="sm-col-4 md-col-4 lg-col-4 xl-col-4"></div>
<div class="sm-col-4 md-col-4 lg-col-4 xl-col-4">
<div class="row">
<div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
<div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
</div>
<div class="row">
<div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
<div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
</div>
</div>
</div>
</div>
ist die CSS:
#about-me {
height: 100vh;
}
.simple-image-box {
height: 50px;
padding: 10px;
width: 40%;
color: cadetblue;
}
Der Klassenname sm-col-4 sollte mit col-sm-4 ersetzt werden. Versuchen Sie, auch alle anderen Spaltennamen zu ersetzen. –
Da Bootstrap zuerst mobil ist, sollten Sie nur col-sm-4 benötigen. Wenn Sie bei jeder Bildschirmgröße die gleiche Anzahl von Spalten benötigen, brauchen Sie nur die kleinste. Es gilt immer noch für mittlere und große Bildschirme. Größen kaskadieren. – jtmingus
Ich kann nicht glauben, dass ich das nicht gesehen habe. Jetzt funktionieren die drei Spalten, aber die Kästchen bleiben immer noch nicht nebeneinander, um ein 2x2 Gitter zu bilden. Alle vier stapeln sich vertikal. – lexicon