Bootstrap 4 Kartendeck mit Wrapper-Element

Ich arbeite mit Angular (v4.3.1) und Bootstrap (v4.0.0-alpha.6). Eine Vorlage enthält zwei Subkomponenten wie so:Bootstrap 4 Kartendeck mit Wrapper-Element

<div class="card-deck"> 
    <comp1></comp1> 
    <comp2></comp2> 
</div>

Vorlagen Sowohl Subkomponente des haben als Klasse Wurzelelement der die .card Bootstrap-Klasse.

<div class="card"> 
    ... 
</div>

Dies einmal erarbeiteten Ergebnisse in der folgenden HTML

<div class="card-deck"> 
    <comp1 _nghost-c3=""> 
     <div _ngcontent-c3="" class="card"> 
      ... 
     </div> 
    </comp1> 
    <comp2 _nghost-c4=""> 
     <div _ngcontent-c4="" class="card"> 
      ... 
     </div> 
    </comp2> 
</div>

Das Problem ist, dass die .card-deck Styling nicht richtig applyed geht, wenn es ein Element der .card Elemente Verpackung ist.

Ein Bootstrap nur Beispiel, das Problem ist eng verbunden mit Bootstrap CSS und nicht offensichtlich eckig.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <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" /> 
 
    <script data-require="[email protected]" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <!-- Displayed properly --> 
 
    <div id="deck-without-wrapper" class="card-deck"> 
 
    <div class="card"> 
 
     <div class="card-block"> 
 
     <p>Card1</p> 
 
     </div> 
 
    </div> 
 
    <div class="card"> 
 
     <div class="card-block"> 
 
     <p>Card2</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <br> 
 

 
    <!-- NOT displayed properly --> 
 
    <div id="deck-with-wrapper" class="card-deck"> 
 
    <div id="wrapper1"> 
 
     <div class="card"> 
 
     <div class="card-block"> 
 
      <p>Card1</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id="wrapper2"> 
 
     <div class="card"> 
 
     <div class="card-block"> 
 
      <p>Card2</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Wer weiß einen Weg, sowohl die Komponenten-Struktur und das Styling zum Laufen zu bringen?

Quelle

2017-07-28 Nathan Lepori

Die Wrapper werden die Probleme verursacht, weil ein div Eigenschaften hat keine flex CSS, Während die .card Klassen flex:1 0 0;

Option 1 (nicht sehr gesund) verwenden: Behaupten, dass die Umhüllungen sind Karten und style sie wie eine Karte würde gestylt werden. Ich würde dagegen raten. Es kann eine Reihe von Problemen auf lange Sicht verursachen.

.card-deck > div { 
 
    display: flex; 
 
    flex: 1 0 0; 
 
    flex-direction:column; 
 
    
 
} 
 

 
.card-deck > div:not(:last-child){ 
 
margin-right:15px; 
 
} 
 
    
 

 
.card-deck > div:not(:first-child) 
 
{ 
 
margin-left:15px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <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" /> 
 
    <script data-require="[email protected]" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <!-- Displayed properly --> 
 
    <div id="deck-without-wrapper" class="card-deck"> 
 
    <div class="card"> 
 
     <div class="card-block"> 
 
     <p>Card1</p> 
 
     </div> 
 
    </div> 
 
    <div class="card"> 
 
     <div class="card-block"> 
 
     <p>Card2</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <br> 
 

 
    <!-- NOT displayed properly --> 
 
    <div id="deck-with-wrapper" class="card-deck"> 
 
    <div id="wrapper1"> 
 
     <div class="card"> 
 
     <div class="card-block"> 
 
      <p>Card1</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id="wrapper2"> 
 
     <div class="card"> 
 
     <div class="card-block"> 
 
      <p>Card2</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Option 2 (bevorzugt): Anwenden des .card Klasse der Winkel Host Element wrapper Sache. Ich habe nicht angular verwendet, gehen Sie durch these docs Sie könnten eine Klasse auf dem Host-Element festlegen. Verwenden von @ Component.host. Oder definieren Sie einige Regeln mit angulars renderer thingy. Ich kann Sie nicht auf die beste Vorgehensweise beraten, mir fehlt das Wissen über eckig.

Am Ende Sie mit <comp1 _nghost-c3="" class="card">

Quelle

2017-07-28 15:01:26 Lars

** Option 2 ** war perfekt, um am Ende wollen würden. Am Ende habe ich den Ansatz '@Component.host verwendet. –

Bootstrap 4 Kartendeck mit Wrapper-Element

Antwort

Verwandte Themen