Ich habe ein Problem mit Bootstrap 4 Spalten Höhe und vertikale Ausrichtung. Hier ist ein JSFiddle mit dem Problem.Bootstrap 4 Spalten vertikal zentrieren und die gleiche Höhe beibehalten
Ich muss ein Layout mit Elementen erstellen, in Desktop sind sie alle in der gleichen Zeile, auf Mobilgeräten erhalten wir zwei Zeilen. All das ist mit Grenzen angetroffen.
Das Problem ist, dass ich es nicht schaffen kann, die Höhe der Spalten zu halten, wenn ich ihren Inhalt vertikal zentrieren möchte. Ohne hinzugefügte Klassen haben die Spalten die gleiche Höhe, aber der Inhalt ist nach oben zentriert. Nach Suchen fand ich die align-items-center, die meine Spalten zentrieren, aber die Höhe bleibt nicht. Das bricht mein Border-Layout.
Ich habe auch versucht, die my-auto, align-self-center Klassen hinzuzufügen, aber ohne Erfolg.
.why-choose-warranty {
width: 100%;
height: 100%;
background-color: #f5f3ef;
color: #11155e;
padding: 1rem;
}
.why-choose-warranty .row {
padding: 1rem;
}
.why-choose-warranty .row div {
justify-content: center;
}
/* Small screens (mobiles) */
@media screen and (max-width: 992px) {
.why-choose-warranty .row {
background-color: white;
border-radius: .5rem;
}
.why-choose-warranty img {
max-width: 40%;
max-height: 40%;
}
.why-choose-warranty .row div:nth-child(1),
.why-choose-warranty .row div:nth-child(2) {
border-right: 1px solid #d7d5d1;
border-bottom: 1px solid #d7d5d1;
}
.why-choose-warranty .row div:nth-child(3) {
border-bottom: 1px solid #d7d5d1;
}
.why-choose-warranty .row div:nth-child(4),
.why-choose-warranty .row div:nth-child(5) {
border-right: 1px solid #d7d5d1;
}
}
/* Big screens (desktops) */
@media screen and (min-width: 992px) {
.why-choose-warranty img {
max-width: 60%;
max-height: 60%;
}
.why-choose-warranty .row div {
border-right: 1px solid #d7d5d1;
}
.why-choose-warranty .row div:last-child {
border-right: 0;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="why-choose-warranty">
<div class="row col-12 col-lg-10 m-auto align-items-center">
<div class="col-4 col-lg-2">
<p class="text-center font-weight-bold">Test</p>
</div>
<div class="col-4 col-lg-2">
<p class="text-center font-weight-bold">Test<br /><br />Test TEST</p>
</div>
<div class="col-4 col-lg-2">
<p class="text-center font-weight-bold">TEST TEST</p>
</div>
<div class="col-4 col-lg-2">
<p class="text-center font-weight-bold">TEST</p>
</div>
<div class="col-4 col-lg-2">
<p class="text-center font-weight-bold">TEST <br /><br /><br /><br /><br />TEST</p>
</div>
<div class="col-4 col-lg-2">
<p class="text-center font-weight-bold">TEST</p>
</div>
</div>
</div>Hat dachte jemand dieses Problem aus? Oder kann mir helfen, es herauszufinden?
Vielen Dank im Voraus Jungs
Versuchen Sie es mit Klassen wie col-md- # (für tablet) und col-sm- # (fo r mobil). Das sollte funktionieren. Referenz: https://v4-alpha.getbootstrap.com/layout/grid/#column-resets – WebGuy
col-sm ist in meinem Fall durch col ersetzt, und col-md von col-lg.Es ist also keine Lösung –