angular - 我的 Angular 组件的顶级 Bootstrap 类应该是什么，以独立于其父级？

Question

我有一个带有以下标记的组件来利用 Bootstrap 网格的优点。

<div class="row">
  <div class="col-6">...</div>
  <div class="col-6">...</div>
</div>

但是我有人提出了这样的担忧，即这意味着组件的父级需要处理row' 的负边距。组件应该被包装在一个container类中，成为一个“完整的”引导网格布局。

<div class="container">
  <div class="row">
    <div class="col-6">...</div>
    <div class="col-6">...</div>
  </div>
</div>

但是，如果我这样做，子组件现在有外部排水沟，这对于这个小组件来说是不必要的，并且当与父母的colorcontainer和孩子的结合时会创建双排水沟container。

根据这个答案，Bootstrap 不会轻易让您移除这些外部排水沟，而是保留内部排水沟。

是否可以在组件的样式中使用 Bootstrap，而无需其父级知道和处理其子级的填充选择？

标签： angulartwitter-bootstrap

Answer 1

容器类的目的是帮助你集中你的内容。如果您的父元素已经用 a 定义.container，我看不出有任何理由将直接子元素与另一个.container. 就像你说的，它只增加了双“外排水沟”。

取自https://getbootstrap.com/docs/4.0/layout/grid/：

容器提供了一种居中和水平填充站点内容的方法。使用 .container 响应像素宽度或 .container-fluid 宽度：在所有视口和设备尺寸上为 100%。

---

您超链接的答案是指引导程序 3 而不是引导程序 4。引导程序 4 具有更多间距实用程序

我真的没有看到“移除外部排水沟”的目的，因为外部排水沟的目的是使您的内容居中。

但是，如果您确实需要，您实际上可以使用px-0bootstrap 4 中的类来执行此操作。

---

使用 .container 和 .row

• 绿色虚线是 .container
• 红线是.row
• 正如观察到的，容器有 15px 的左右填充
• 行的左右边距为 -15px
• col-6 有 15px 的左边距。因此，15px - 15px + 15px = 15px

仅使用 .row （因此，边距为负）

• 行的左右边距为 -15px
• col-6 有 15px 左右边距
• (-15 像素) + 15 像素 = 0 像素。因此，根本没有“外槽宽度”。

简单的代码笔示例