Bootstrap cols 不连续 Angular答案

【问题标题】：Bootstrap cols do not stand in a row AngularBootstrap cols 不连续 Angular
【发布时间】：2018-08-30 12:07:28
【问题描述】：

我在使用 Angular 组件时遇到了一些问题。
我有以下代码：

<div class="container">
  <div class="row">
    <app-item></app-item>
    <app-item></app-item>
  </div>
</div>

在app-item 组件内部我得到了这个代码：

<div class="col-6">
  <p>Some text</p>
</div>

我不明白为什么这些列不排成一行。它实际上是第二列下的一列
但如果我这样做：

<div class="container">
  <div class="row">
    <div class="col-6">
      <p>Some text</p>
    </div>
    <div class="col-6">
      <p>Some text</p>
    </div>
  </div>
</div>

然后它工作正常。为什么当我尝试使用组件时我的代码不起作用？发生这种情况的原因是什么？
另外由于某些原因，我的组件 app-item 没有 100% 宽度
谁能解释我怎么了？

【问题讨论】：

需要支持哪些浏览器？
@user184994 我认为所有当前版本的浏览器，如歌剧、谷歌浏览器等
好的。您是否可以将 col-6 类移到 app-item 标记上？
@user184994 如果我像这样在组件上移动 col-6 标签并从组件文件中删除 col-4 类.有用。但我实际上不确定这是正确的方法，不是吗？
我认为问题在于 flex 样式仅适用于直系子女，在这种情况下，您有 app-item 的方式。有display: contents CSS 规则，但它对浏览器的支持仍然非常有限。

标签： angular twitter-bootstrap

【解决方案1】：

只需要包含引导库链接：

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Some text</p>
    </div>
    <div class="col-sm-6">
      <p>Some text</p>
    </div>
  </div>
</div>
</body>
</html>

【讨论】：

【解决方案2】：

请尝试以下，

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

应用项目内部

<p>Some text</p>

【讨论】：

我确定它会工作，但我需要从 json 动态获取数据，我不知道我有多少列，这是个问题。有时这种方式行不通

【解决方案3】：

这可能会迟到，但可能会对 OP 或其他人有所帮助。我以类似的方式解决了它，虽然我可以像@malindu 提到的那样解决它，因为我知道会有多少cols，但它不是通用的。

因此，如果您将类直接传递给您的component，如以下代码 sn-p 并从组件内部删除col-* div，它可以正常工作，因为现在col 是该行的直接子级。检查下面的代码sn-p：

<div class="container">
  <div class="row">
    <app-item class="col-6"></app-item>    <-------- check the class here
    <app-item class="col-6"></app-item>
  </div>
</div>

然后在你的组件内部

<p>Some text</p>    <-------and then it is removed from inside here

【讨论】：