Bootstrap 4卡包裝與包裝元素

我正在使用Angular（v4.3.1）和Bootstrap（v4.0.0-alpha.6）。模板包含兩個子像這樣：Bootstrap 4卡包裝與包裝元素

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

兩個子組件的模板有作爲根元素的類.card Bootstrap類。在下面的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-deck造型沒有得到正確applyed如果有包裹.card元素的元素。

一個Bootstrap的例子，這個問題與Bootstrap css嚴格相關，而不是明顯的Angular。

<!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方法。 –

Bootstrap 4卡包裝與包裝元素

回答

相關問題