scss: Tasten zum Anzeigen nebeneinander nebeneinander

Question

Kürzlich habe ich eine Schaltfläche zu meiner mobilen App hinzugefügt. Die Schaltflächen werden auf dem Bildschirm jedoch unterschiedlich angezeigt.

Für ein Beispiel, wenn ich es auf iphone 6+ laufen lasse, zeigen die Knöpfe Seite an Seite an, wie unten gezeigt, aber wenn ich es auf iphone 4 anzeigen, wird der zweite Knopf unterhalb davon anstatt daneben angezeigt.

Ich habe Prozent verwendet, um es reagieren zu lassen, aber anscheinend sieht etwas mit meinem Sass falsch aus.

für ein Beispiel, ich möchte die Outlook wie im Bild gezeigt, unabhängig von der Bildschirmgröße ist.

das ist mein sass Code

.IonFooter { 
     button { 
      width: 48%; 
      height: 60px; 
      border-radius: 5px; 
      font-size: 1.3em; 
     } 
} 

Vielen Dank im Voraus

Answer 1

Das Verhalten der Buttons wahrscheinlich von der berüchtigten display: inline-block; rechten Rand "Bug" verursacht wird (Sehen Sie sich diese CSS Tricks article über das Problem). Dies kann auch durch Auffüllen des übergeordneten Elements verursacht werden.

Wie auch immer, ich schlage vor, dass Sie flex verwenden, um zu vermeiden, dass Ihre Schaltflächen in mehrere Zeilen fallen.

.IonFooter { 
    display: flex; 
    justify-content: space-between; 

    button { 
     flex: 0 0 48%; // Grow: no, shrink: no, width: 48 % 
     height: 60px; 
     border-radius: 5px; 
     font-size: 1.3em; 
    } 
}