时间戳

首页 > 解决方案 > Bootstrap cols 不连续 Angular

angular - Bootstrap cols 不连续 Angular

问题描述

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

标签： angulartwitter-bootstrap

解决方案

只需要包含引导库链接：

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

推荐阅读