ラップトップ要素を持つブートストラップ4カードデッキ

私はAngular（v4.3.1）とBootstrap（v4.0.0-alpha.6）で作業しています。テンプレートはそのような2つのサブコンポーネントが含まれます。ラップトップ要素を持つブートストラップ4カードデッキ

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

をどちらもサブコンポーネントのテンプレートは、ルート要素のクラスとして.cardブートストラップクラスを持っています。以下の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>

問題で

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

これ、一度コンパイル結果が.card要素をラップする要素がある場合.card-deckスタイリングが正しくapplyedれないということです。

ブートストラップのみの例では、問題は厳密にブートストラップCSSに関連しており、明らかに角度ではありません。

<!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>

誰もが部品の構造やスタイリング作業の両方を取得する方法を知っていますか？

出典

2017-07-28 Nathan Lepori

ラッパーはdiv要素は、任意のフレックスCSSプロパティを持っていないため.cardクラスはflex:1 0 0;

オプション1（非常に正気ではない）を使用している一方で、トラブルを引き起こしている：ラッパーはカードであることをふり、および彼らはカードのようなスタイルになります。私はこれに対して助言をするだろう。長期的には数多くのトラブルを引き起こす可能性があります。

.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>

オプション2（推奨）：角度ホスト要素ラッパー事に.cardクラスを適用します。私は角を使用していない、these docsあなたはホスト要素上にクラスを設定することができます。 @ Component.hostの使用。 angulars renderer thingyを使用していくつかのルールを定義します。私はあなたに最良のアプローチについて助言することはできません、私は角度に関する知識が不足しています。

最後に、<comp1 _nghost-c3="" class="card">

出典

2017-07-28 15:01:26 Lars

**オプション2 **が完璧でした。最後に、私は '@Component.host 'アプローチを使用しました。 –

ラップトップ要素を持つブートストラップ4カードデッキ

答えて

関連する問題