css: verschiedene Säulenbehälterhöhe in Chrome & Safari (Bootstrap 4)

Ich habe einen solchen Code (es ist ein Prototyp, in realen Anwendung ist alles anders, aber das gleiche Schema):css: verschiedene Säulenbehälterhöhe in Chrome & Safari (Bootstrap 4)

<body> 
    <div class="row"> 
     <div class="col-3 d-none d-sm-block"> 
     <div class="h-100" style="background:red"> 
      123123 
     </div> 
     </div> 
     <div class="col-3 d-none d-sm-block"> 
     asdasdasd <br> asdasdasd <br> asdasdasd 
     </div> 
    </div> 
    </body>

https://plnkr.co/edit/TyrOGOCNBHePtbxH6xYN?p=preview

ich bin mit Bootstrap 4.

Aber alles Chrom ist in Ordnung:

nicht in Safari (v10. 1):

was mache ich falsch? Ist es möglich, diesen Stil zu ändern, ohne mein DOM neu aufzubauen? so sollte die Höhe wie in Chrome sein

Quelle

2017-10-02 brabertaser19

Ich habe nicht Safari, so Ich kann es nicht selbst testen, also frage ich mich, ob das funktioniert bevor ich ein Posting mache Antwort: https://plnkr.co/edit/MlIfOIl6OKyPgtm9lTbQ?p=preview – LGSon

@LGSon nein nein nein. Bitte nicht ändern -block zu -flex – brabertaser19

Erstens, hat es funktioniert? ... Zweitens, erklären Sie, warum Sie blockieren müssen. – LGSon

Mit dem angegebenen Code wird dies bei Safari nicht funktionieren.

Der Grund ist ganz einfach, wie wenn Sie h-100 (height: 100% !important) auf der inneren div gesetzt, wird dieser Prozentwert auf der eingestellten Höhe des Elternteils basieren, die in diesem Fall keine hat, daher der berechnete Wert auto sein wird.

Die anderen Browser scheinen die berechnete Höhe des Elements col-3 flex item und dessen align-items: stretch zu verwenden, daher funktioniert es.

Diese Probe zeigt, dass, als ob Sie setzen align-items zu flex-start, es auch in den anderen Browsern fehl: https://plnkr.co/edit/LqSqK4j4GhpDbkc4E0i5?p=preview

Ein besserer Ansatz ist richtig Verwendung von Bootstrap 4 und dem Flexbox Modell zu machen, was in diesem Fall für Flex-Zeilenelemente align-items ist. Sein Standardwert ist stretch und macht genau dasselbe wie height: 100%.

Und da es nicht alles, was Sie mit einem Blockelement zu tun, dass Sie nicht mit einem Flex-Elemente können einfach h-100-w-100 und d-sm-block-d-sm-flex ändern und es wird funktionieren.

Updated plnkr

Stapel Snippet

<link data-require="[email protected]" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> 
 

 
    <h1>Hello Plunker!</h1> 
 
    
 
    <div class="row"> 
 
     <div class="col-3 d-none d-sm-flex"> 
 
     <div class="w-100" style="background:red"> 
 
      123123 
 
     </div> 
 
     </div> 
 
     <div class="col-3 d-none d-sm-flex"> 
 
     asdasdasd <br> asdasdasd <br> asdasdasd 
 
     </div> 
 
    </div>

Ein besserer Ansatz als die Verwendung von w-100 (width: 100%) wäre flex: 1 zu verwenden. Da die Regel von Bootstrap col das tut, aber auch Padding hat, könntest du eine eigene erstellen, hier flex-1 genannt.

.flex-1 { 
    -webkit-flex-basis: 0; 
    -ms-flex-preferred-size: 0; 
    flex-basis: 0; 
    -webkit-box-flex: 1; 
    -webkit-flex-grow: 1; 
    -ms-flex-positive: 1; 
    flex-grow: 1; 
    max-width: 100%; 
}

https://plnkr.co/edit/ODeYcUgEDdZjysnCQSYB?p=preview

Oder verwenden col mit einer neuen Regel combinded, die die Polsterung entfernt, hier genannt nopadding

.nopadding { 
    padding: 0; 
}

https://plnkr.co/edit/jj07PrEVXDMW2eRLw4Ti?p=preview

Quelle

2017-10-03 09:21:32 LGSon

nein, das wird zumindest in einem fall nicht funktionieren, ich werde dir Code zeigen, genau was ich meine – brabertaser19

@ brabertaser19 Das wäre toll. – LGSon

https://plnr.rc/edit/gQdLjTVH2N70AFOYfqiJ?p=preview zum Beispiel - das wird nicht in Safari funktionieren (aber in Chrome - es ist in Ordnung) – brabertaser19

-1

Sie haben nichts falsch gemacht, Bootstrap verwendet einfach Hersteller-Präfixe für seine Spalten, die nicht in Safari abgedeckt sind.

Die Standard-Bootstrap-Eigenschaften für Spalten sind:

-webkit-box-flex: 0; 
-webkit-flex: 0 0 25%; 
-ms-flex: 0 0 25%; 
flex: 0 0 25%;

Ich habe Safari nicht, so kann dies nicht bestätigen, aber Sie sollten einfach hinzufügen:

.col-3 { 
    display: -webkit-flex; 
}

Safari 10.1.1 ab supports flexbox, so dass Safari gezwungen wird, die Spalte in einem Flexbox-Layout zu rendern und somit das Höhenproblem zu lösen.

Hoffe, das hilft!

Quelle

2017-10-02 20:53:24

Safari-Unterstützung nicht vorangestellt Flexbox seit ver. 9 – LGSon

Auch 'display: -webkit-flex' hinzuzufügen macht keinen Unterschied, da der bereits gesetzte' d-sm-Block '' wichtig' verwendet ... und übrigens, ich habe nicht abgestimmt :) – LGSon

i habe auch nicht downvooted ... – brabertaser19

css: verschiedene Säulenbehälterhöhe in Chrome & Safari (Bootstrap 4)

Antwort

Verwandte Themen