Bootstrap 行类不会向下传播到 Angular 中的组件

Posted 2023-03-05

【中文标题】Bootstrap 行类不会向下传播到 Angular 中的组件

【英文标题】：Bootstrap row class not propagating down to components in Angular

【发布时间】：2018-03-20 11:20:04

【问题描述】：

我有许多这样声明的控件。

<div class="row">
  <div class="col-sm-12">
    <div>Caption</div>
    <input type="text" class="form-control">
  </div>
</div>

为了重构我的代码，我引入了一个组件来封装这个特定的行为。

<div class="row">
  <app-textbox [caption]="'Caption'"></app-textbox>
</div>

组件的标记只是原始代码的副本。

<div class="col-sm-12">
<!-- <div style="width:100%;"> -->
<!-- <div class=""> -->
  <div>data?.caption</div>
  <input type="text" class="form-control">
</div>

出现的问题是类 row 似乎没有传播到组件。它扩展到整个宽度（因为它设置为 12 但它不是持有类 row 的组件的宽度 - 它更小）。分析浏览器控制台中的标记，我可以看到唯一的区别是在结构中注入了自定义控件的标记，如下所示：

div class="行" -- 应用程序文本框 -- -- div class="col-sm-12" -- -- 输入

而“旧式”会生成这个：

div class="行" -- div class="col-sm-12" -- 输入

处理它的一种方法是像这样在主页中设置组件上的列。

<div class="row">
  <app-textbox [caption]="'Caption'" class="col-sm-12"></app-input-text>
</div>

但是，有两个问题困扰着我，让我不愿意采用这种方法。第一个是该组件仍然在相对于封闭组件的每一侧获得（非常微小）15px 的额外边距（所有项目都有它，但自定义 app-textbox 得到它两次，可能是由于封装）。另一个问题是这种方式违背了封装的目的。

我尝试过分散组件的宽度并为输入框设置不同的样式/类等。几个小时后，我意识到我不知所措。

是否可以让注入的标签app-textbox在其父级中完全展开？

【问题讨论】：

你解决了吗？

@skiabox 之类的。我重建了整个标记，其他人为其添加了一堆自定义样式。在我测试的分辨率上看起来不错。不过，不知道它是否得到妥善解决。我不再参与那个项​​目，所以我什至无法重现这个问题。遗憾的是，我们可能永远不会知道确切的原因。请问你为什么想知道？

【参考方案1】：

我有同样的问题。这是我解决它的方法。

原app.component.html：

<div class="container-fluid">
  <div class="row">
   <app-one></app-one>
   <app-two></app-two>
  </div>
</div>

原one.component.html：

<div class="col-9">
 <p>One</p>
</div>

原two.component.html：

<div class="col-3">
 <p>Two</p>
</div>

我将 'col' div 从一个和两个组件移到了应用组件：

新app.component.html:

<div class="container-fluid">
  <div class="row">
   <div class="col-9">
    <app-one></app-one>
   </div>
   <div class="col-3">
    <app-two></app-two>
   </div>
  </div>
</div>

新one.component.html:

<p>One</p>

新two.component.html:

<p>Two</p>

【参考方案2】：

要让 css 在所有组件中可见，请将其直接添加到 index.html 文件或 app.component.css。

（我假设您的 Angular2 项目是使用 angular-cli 生成的，并且文件遵循标准名称）

...关于额外边距，请尝试检查app.component.html。也许它周围有一个容器 div。还要检查index.html 本身

【讨论】：

感谢您的回复。我应该添加样式可能存在（我看到控件按照 Bootstrap 的指示进行格式化）。 col-sm-6 之类的样式也可以工作，但是 宽度与其他组件相关，而不是带有 row 类的组件。它似乎指的是中间标签（app-textbox）。有什么想法吗？

啊我明白你的意思了，那是另一回事。也许尝试将class="col-sm-12" 放在 本身