Question

我在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％的宽度
谁能解释我怎么了？

Answer 1

请尝试以下操作

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

Answer 2

只需添加引导程序库链接：

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

Answer 3

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

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

<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

Bootstrap列不连续成角度

3 个答案: