首页 文章

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

提问于
浏览 次
7

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

<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 but 它不是持有类行的组件的宽度 - 它's smaller). Analyzing the markup in the console of the browser, I can see that the only difference is that there' s是在结构中注入的自定义控件的标记，如下所示：

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得到它两次，可能是由于封装） . 另一个问题是这种破坏了封装的目的 .

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

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

html css angular bootstrap-4

2 回答

  • 1

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

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

    ...关于额外保证金，请尝试检查 app.component.html . 也许周围有一个容器div . 另请检查 index.html 本身

    回复于
  • 0

    我遇到了同样的问题 . 安装 tether 和 bootstrap npm模块帮助了我 .

    npm install bootstrap@3.3.7 --save

npm install bootstrap@3.3.7 tether jquery --save

    在.angular-cli.json文件中添加依赖项

    "styles":[
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],

"scripts":[
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],

    有关更多信息，请参阅此链接https://stackoverflow.com/a/48736103/6352772

    回复于

相关问题