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>

任何人都知道一个办法让这两个部件的结构和造型方面的工作？

答

的包装都造成麻烦，因为一个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">

**选项2 **落得最终是完美的。最后我使用了'@Component.host方法。 –

Bootstrap 4卡包装与包装元素

相关推荐