logo标签列表

Bootstrap 4卡片堆叠与包装元素

csstwitter-bootstrapangular
5

我正在使用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的示例，这个问题显然与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>

有没有办法同时获取组件结构和样式呢？

1个回答
7
包装器出现问题，因为div没有任何flex css属性，而.card类使用了flex:1 0 0;。
选项1（首选）：将.card类应用于angular主机元素包装器，而不是第一个子元素。我没有使用过angular，根据这些文档，您可以在主机元素上设置一个类。使用@Component.host。
或者使用angular自定义渲染器定义一些规则。我无法为您提供最佳方法建议，因为我缺乏对angular的了解。
最终，您希望最终得到。
选项2（不太明智）：假装包装器是卡片，并像卡片一样进行样式设置。我建议不要这样做。它会在长期运行中引起问题。较新的bootstrap版本可能会更改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>

1
选项2非常完美。最终我使用了@Component.host方法。 - Nathan Lepori
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接