正文 

当前位置： 首页 > 问答 >

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

     2023-03-05     232

关键词：

【中文标题】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" 放在 本身

哪些 React Material-UI 组件为我的页面添加了间距（如 Bootstrap 中的行类）？

】哪些ReactMaterial-UI组件为我的页面添加了间距（如Bootstrap中的行类）？【英文标题】：WhichReactMaterial-UIcomponentsaddaspacingtomypage(likearowclassinBootstrap)?【发布时间】：2020-03-0321:53:45【问题描述】：我使用React和Material-UIforReact创建了一... 查看详情

Bootstrap h 标签与行类对齐

】Bootstraph标签与行类对齐【英文标题】：Bootstraphtagalignmentwithrowclass【发布时间】：2021-02-1919:40:16【问题描述】：我正在尝试使用引导程序在表单元素顶部对齐标题。并有以下代码：<divclass="container"><h4>Heading</h4><d... 查看详情

Bootstrap 行类包含 margin-left 和 margin-right 这会产生问题

】Bootstrap行类包含margin-left和margin-right这会产生问题【英文标题】：Bootstraprowclasscontainsmargin-leftandmargin-rightwhichcreatesproblems【发布时间】：2014-06-0222:14:03【问题描述】：我正在使用Bootstrap\'row\'类将divs一个在另一个上对齐，效果很... 查看详情

在 Core Data 中执行子获取时，在父上下文中修改托管对象是不是会向下传播到子上下文？

...ata中执行子获取时，在父上下文中修改托管对象是不是会向下传播到子上下文？【英文标题】：DoesmodifyingamanagedobjectinaparentcontextpropagatedowntochildcontextswhenperformingachildfetchinCoreData?在CoreData中执行子获取时，在父上下文中修改托管... 查看详情

如何将 bootstrap-vue 图标包含到 nuxtjs 中？导航栏向下箭头的问题

】如何将bootstrap-vue图标包含到nuxtjs中？导航栏向下箭头的问题【英文标题】：Howtoincludebootstrap-vueiconsintonuxtjs?Problemwithnavbardownarrows【发布时间】：2020-07-1715:04:18【问题描述】：编辑：嗯，可能会有样式覆盖-我可以从下面的下拉... 查看详情

Bootstrap 崩溃 - 转到打开项目的顶部？

】Bootstrap崩溃-转到打开项目的顶部？【英文标题】：Bootstrapcollapse-gototopoftheopenitem?【发布时间】：2013-01-1618:16:26【问题描述】：我正在使用bootstrap折叠功能，但是当我打开一个内容很多的元素，然后打开下一个元素时，它会向... 查看详情

QML TableView 鼠标区域不会将点击传播到选择模型

】QMLTableView鼠标区域不会将点击传播到选择模型【英文标题】：QMLTableViewMouseareadoesnotpropagateclicktoselectionmodel【发布时间】：2018-06-1619:40:25【问题描述】：我有一个TableView和一个包含MouseArea的委托。我想将点击传播到TableView，以... 查看详情

我的 UITableView 不会向下滚动到数据的末尾！为啥？

】我的UITableView不会向下滚动到数据的末尾！为啥？【英文标题】：MyUITableViewwon\'tscrolldownthroughtheendofthedata!Why?我的UITableView不会向下滚动到数据的末尾！为什么？【发布时间】：2011-11-0811:59:16【问题描述】：好吧，我不知道为什... 查看详情

DependencyProperty 的值不会从 XAML 传播到后面的代码

】DependencyProperty的值不会从XAML传播到后面的代码【英文标题】：ThevalueofDependencyPropertyisnotpropagatedfromXAMLtocodebehind【发布时间】：2012-11-0818:48:15【问题描述】：问题在于DependencyProperty未分配给XAML中指定的值：我有两个不同的用户... 查看详情

Spring Cloud Task 参数不会传播到 Spring Batch 作业参数

】SpringCloudTask参数不会传播到SpringBatch作业参数【英文标题】：SpringCloudTaskargumentsarenotpropagatedtoSpringBatchjobparameters【发布时间】：2018-08-3106:41:06【问题描述】：我正在从普通的SpringBatch迁移到SpringCloud任务，并通过SpringCloud数据流... 查看详情

ReactJS setState 更改不会从父组件传播到子组件[重复]

】ReactJSsetState更改不会从父组件传播到子组件[重复]【英文标题】：ReactJSsetStatechangesnotpropagatingfromparenttochildcomponent[duplicate]【发布时间】：2016-10-2823:31:23【问题描述】：我有两个具有父子关系的简单reactjs组件。子元素包含一个... 查看详情

SBT 插件：如何将编译器插件添加为不向下游传播的依赖项？

】SBT插件：如何将编译器插件添加为不向下游传播的依赖项？【英文标题】：SBTPlugin:Howtoaddcompilerpluginasadependencythatisnotpropagateddownstream?【发布时间】：2017-10-0103:03:10【问题描述】：我正在编写一个SBT插件。我想使用CirceJSON库，但... 查看详情

嵌套 Promise 不会将错误传播到 Node.js 中的父 Promise？

】嵌套Promise不会将错误传播到Node.js中的父Promise？【英文标题】：NestedPromiseisnotpropagatingerrortoparentPromiseinNode.js?【发布时间】：2017-11-1015:09:39【问题描述】：我正在使用运行Express的Node.js/TypeScript创建一个API。以下是我的get方法的... 查看详情

键盘消失时，UIScrollView 不会向下滚动到其原始位置

】键盘消失时，UIScrollView不会向下滚动到其原始位置【英文标题】：UIScrollViewdonotscrolldowntoitsoriginalpositionwhenkeyboarddisappear【发布时间】：2017-10-1918:31:58【问题描述】：我面临着非常奇怪的情况。当键盘出现在某些UITextView上时，... 查看详情

在 Angular 4 中，为啥异步验证的嵌套控件不会将其有效性传播到父 FormGroup？

】在Angular4中，为啥异步验证的嵌套控件不会将其有效性传播到父FormGroup？【英文标题】：InAngular4,whydoasynchronouslyvalidatednestedcontrolsnotpropagatetheirvaliditytotheparentFormGroup?在Angular4中，为什么异步验证的嵌套控件不会将其有效性传播... 查看详情

vscodeui语言不会传播到python扩展命令面板(代码片段)

我已将官方微软python扩展（v2019.2.5558）添加到我的VSCode安装（v1.32.1）。VSCode使用默认的UI语言en运行，该语言在locale.json中设置。我从未安装任何其他语言包。由于VSCode的UI语言设置为en，我希望此设置传播到命令调色板。但是，... 查看详情

Bootstrap 4行填充剩余高度

】Bootstrap4行填充剩余高度【英文标题】：Bootstrap4rowfillremainingheight【发布时间】：2018-10-2002:40:45【问题描述】：我正在努力使一行伸展以填充剩余的可用高度。我尝试将h-100添加到行类中，但这会导致屏幕底部出现空白。一定有... 查看详情

Spring security Login 不会将我的表单（POST）传播到控制器

】SpringsecurityLogin不会将我的表单（POST）传播到控制器【英文标题】：SpringsecurityLogindoesNOTpropagatemyform(POST)toController【发布时间】：2019-02-1903:27:47【问题描述】：在主页上（permitAll()）我有一个表单（Action"/saveX"authenicated()）我有... 查看详情