Bootstrap-Verhältnis

Ich möchte ein Karten-Layout erstellen. Die Karten sollten das Seitenverhältnis einer Standard-TKG-Karte haben.Bootstrap-Verhältnis

So mit einer Seite Service, den ich gefunden habe, dass ich

padding-top: 39.68%;

Im plunkr hinzuzufügen habe, habe ich diese gebaut. Es funktioniert gut auf den Anfangszustand von col-sm-3, aber sobald ich zu col-xs-2 wechseln, ist das Seitenverhältnis völlig unterschiedlich.

Wenn Sie es in Plunkr Größe ändern, werden Sie sehen, was ich meine.

Plunkr

Quelle

2017-07-06 Doomenik

haben Sie versucht, eine Medien Abfrage mit dem Auffüllen Wert ändern? – Kai

@kai das sollte mit col-xs gemacht werden und col-sm es tauscht die css-code auch – Doomenik

Schließlich vermisse ich etwas zu verstehen, sollte die Polsterung das Verhältnis zwischen Höhe und Breite halten. Als einfaches Beispiel sollte die Höhe jedes Mal doppelt so groß wie die Breite sein. – Doomenik

Sie nicht die Polsterung gelten direkt zu einem Element, das eine bestimmte Breite hat - die Breite muss auto sein, damit das Padding funktioniert und das Seitenverhältnis einer TCG-Karte darstellt.

Die Größe einer TKG-Karte beträgt 63 x 88 mm. Um die Höhe als Prozentsatz zu erhalten, teilen Sie die Höhe durch die Breite - 88/63 = 139%.

Da Sie es nicht auf die Karte selbst anwenden möchten, wenden Sie dieses Padding auf ein Pseudo-Element an und steuern die Höhe der Karte, auf die es angewendet wird.

/* Styles go here */ 
 
.card { 
 
    background-color: grey; 
 
    border: 3px solid; 
 
} 
 
.card:before { 
 
    content: ''; 
 
    width: 1px; 
 
    padding-bottom: 139.68253968%; 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link data-require="[email protected]*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    </head> 
 

 
    <body> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-sm-2 card col-xs-3"> 
 
      1 
 
     </div> 
 
     <div class="col-sm-2 card col-xs-3"> 
 
      2 
 
     </div> 
 
     <div class="col-sm-2 card col-xs-3"> 
 
      1 
 
     </div> 
 
     <div class="col-sm-2 card col-xs-3"> 
 
      2 
 
     </div> 
 
     <div class="col-sm-2 card col-xs-3"> 
 
      1 
 
     </div> 
 
     <div class="col-sm-2 card col-xs-3"> 
 
      2 
 
     </div> 
 
     <div class="col-sm-2 card col-xs-3"> 
 
      1 
 
     </div> 
 
     <div class="col-sm-2 card col-xs-3"> 
 
      2 
 
     </div> 
 
     
 
     </div> 
 
    </div> 
 
    
 
    </body> 
 

 
</html>

Quelle

2017-07-17 03:52:04

Nach dem Seitenverhältnis von Ihnen bereitgestellten heißt, sollte 56:81 Karte Höhe 81/56*width sein. Die Kartenbreite variiert je nach den Bootstrap-Klassen col-xs-3 (16,666667%) und col-sm-2 (25%).

Wir können die oben genannte Höhe beibehalten, indem wir sie dem Div als Polsterung geben. Wenn wir jetzt irgendeinen Inhalt zum div hinzufügen, dann die Höhe der div incereses, um dies zu vermeiden, fügen Sie einen Wrapper zu Ihrem div hinzu.

Padding Prozentsätze sind 24.1% dh 81/56 * 16,66667% für sm und 36.16% dh 81/56 * 25% für xs

.card-wrapper { 
 
    padding-top: 24.1%; 
 
    background-color: grey; 
 
    border: 3px solid; 
 
    position: relative; 
 
} 
 

 
.card-content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right:0; 
 
} 
 

 
@media (max-width: 767px) { 
 
    .card-wrapper { 
 
    padding-top: 36.16%; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link data-require="[email protected]*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    </head> 
 

 
    <body> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-sm-2 card-wrapper col-xs-3"> 
 
      <div class="card-content"> 
 
      1   
 
      </div> 
 
     </div> 
 
     <div class="col-sm-2 card-wrapper col-xs-3"> 
 
      <div class="card-content"> 
 
      2   
 
      </div> 
 
     </div> 
 
     <div class="col-sm-2 card-wrapper col-xs-3"> 
 
      <div class="card-content"> 
 
      1   
 
      </div> 
 
     </div> 
 
     <div class="col-sm-2 card-wrapper col-xs-3"> 
 
      <div class="card-content"> 
 
      2   
 
      </div> 
 
     </div> 
 
     <div class="col-sm-2 card-wrapper col-xs-3"> 
 
      <div class="card-content"> 
 
      1   
 
      </div> 
 
     </div> 
 
     <div class="col-sm-2 card-wrapper col-xs-3"> 
 
      <div class="card-content"> 
 
      2   
 
      </div> 
 
     </div> 
 
     <div class="col-sm-2 card-wrapper col-xs-3"> 
 
      <div class="card-content"> 
 
      1   
 
      </div> 
 
     </div> 
 
     <div class="col-sm-2 card-wrapper col-xs-3"> 
 
      <div class="card-content"> 
 
      2   
 
      </div> 
 
     </div> 
 
     
 
     </div> 
 
    </div> 
 
    
 
    
 
    </body> 
 

 
</html>

Quelle

2017-07-14 07:08:55

Das funktioniert, nicht ganz sicher warum. Ich tuht ich kann irgendwie das Verhältnis definieren und es behalten.Wie 4: 3, egal was kommt. Aber ty. – Doomenik

Bootstrap-Verhältnis

Antwort

Verwandte Themen