带有包装器元素的 Bootstrap 4 卡片组答案

【问题标题】：Bootstrap 4 card-deck with wrapper element带有包装器元素的 Bootstrap 4 卡片组
【发布时间】：2018-01-04 04:57:56
【问题描述】：

我正在使用 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 元素，则 .card-deck 样式无法正确应用。

仅是一个 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>

任何人都知道让组件结构和样式同时工作的方法吗？

【问题讨论】：

标签： css twitter-bootstrap angular

【解决方案1】：

包装器造成了麻烦，因为 div 没有任何 flex css 属性，而 .card 类正在使用 flex:1 0 0;

选项 1（首选）：将 .card 类应用于 angular 宿主元素包装器，而不是第一个子元素。
我没有使用角度，通过these docs 你可以在宿主元素上设置一个类。使用@Component.host。

或者使用angulars custom renderer 定义一些规则。我不能建议你最好的方法，我缺乏关于角度的知识。

最后你会想要<comp1 _nghost-c3="" class="card">

选项 2（不是很理智）：假设包装是卡片，
并将它们设置为卡片样式。
我建议不要这样做。
从长远来看，它可能会造成麻烦。 IE 较新的引导程序版本可能会更改 css 样式，您可能会忘记更新这些自定义规则。

.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 非常完美。最后我使用了`@Component.host 方法。