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

Question

我有许多像这样声明的控件.

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

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

div class ="row"
- app-textbox
- - div class ="col-sm-12"
- - 输入

而"旧式"产生了这个:

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

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

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

然而,有两个问题困扰我,让我觉得这种方法不太重要.第一个是组件相对于封闭组件仍然获得(非常小)每边15px的额外边距(所有项目都有它,但自定义应用程序文本框得到它两次,可能是由于封装).另一个问题是这种破坏了封装的目的.

我已经尝试传播组件的宽度并将不同的样式/类设置到输入框等.几个小时后,我意识到我不知所措.

是否有可能使注入的标签app-textbox在其父级中完全传播？

Answer 1

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

例如，在index.html上作为最后一个头元素包括：

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

该 URL 取自：https://getbootstrap.com/docs/3.3/getting-started/

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

关于额外保证金，请尝试检查app.component.html。也许它周围有一个容器 div。也检查一下index.html自己