Question

我正在使用Angular（v4.3.1）和Bootstrap（v4.0.0-alpha.6）。模板包含两个子组件，如：

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

两个子组件的模板都将.card Bootstrap类作为根元素的类。

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

这一次，一旦编译后会产生以下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>

问题是，如果有一个包含.card-deck元素的元素，则.card样式无法正确应用。

仅一个Bootstrap示例，问题与Bootstrap css严格相关，而不是Angular。

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@4.0.5" 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="bootstrap@4.0.5" 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>

任何人都知道如何让组件结构和样式工作？

Answer 1

包装器导致问题，因为div没有任何flex 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="bootstrap@4.0.5" 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="bootstrap@4.0.5" 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">

结束

Bootstrap 4卡片与包装元素

1 个答案: