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

Question

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

Nat*_*ori 4 css twitter-bootstrap angular

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

这，一旦编译结果在以下 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>

Run Code Online (Sandbox Code Playgroud)

问题是.card-deck如果有一个元素包裹.card元素，样式就不会被正确应用。

仅 Bootstrap 示例，问题与 Bootstrap css 严格相关，而与 Angular 无关。

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Lar*_*ars 6

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

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

或者使用angulars 自定义渲染器定义一些规则。我无法就最佳方法向您提供建议，我缺乏有关角度的知识。

最后你会想要结束 <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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，3 月前
查看次数：	1909 次
最近记录：	5 年，11 月前