如何用angular 4 和bootstrap 4 设置多列？

Question

上下文：

我正在尝试做一件基本的事情：

<container>
    <div class="row">
    <div class="col-3">
    ...
    </div>
    <div class="col-4">
    ...
    </div>
    <div class="col-5">
    ...
    </div>
</div>

每列专用于其自己的模块。假设第一列是垂直菜单，中间列是事物列表，最后一列是在第二列中选择的事物的详细信息。我正在使用 Angular4 和 Bootstrap4（在 ng-bootstrap 的帮助下）。我对他们两个都是新手。

问题：

第一列没问题，它显示了预期大小的菜单。尝试设置第二列时出现问题。这是生成的代码：

<div class="container-fluid">
  <div class="row">
    <div id="sidebar" class="col-md-3">
      ...
    </div>

    <router-outlet></router-outlet>
    <list-of-things ng-version="4.0.3">
      <div class="col-md-3">
        ...
      </div>
    </list-of-things>
    ...
  </div>
</div>

问题是组件选择器 <list-of-things ng-version="4.0.3"> 有一个确定的宽度，我不知道这个宽度是从哪里来的。因此，当我设置宽度 col-md-3 时，3 是相对于 <list-of-things ng-version="4.0.3"> 的大小而不是页面宽度。所以我最终得到了一个非常norrow的列表......将内部div的值设置为col-md-12填充<list-of-things>框。

附加信息： 下面是 <list-of-things> 的 CSS 堆栈，直接来自 Web 开发人员工具。

element {}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

*,
*::after,
*::before {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  font-family: "Segoe UI", "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
  font-size: 0.9375rem;
  font-weight: normal;
  line-height: 1.5;
  color: #373a3c;
}

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #292b2c;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

Answer 1

我通过反复试验找到了自己的答案。

最好的办法是将 class "col-md-3" 添加到 <list-of-things> 标签。困难的部分是这个标签是由 angular 通过组件选择器定义注入的。目前关于该选择器的文档相当少。

基本上，所有示例都向您展示了如何设置选择器：

@Component({
  selector: 'my-posts',
  templateUrl: './../templates/posts.component.html',
  providers: [PostService]
})

显然，如果您将选择器值放在方括号 [ 和 ] 中，则标记将是一个 <div> 标记，其中包含方括号之间的任何内容。

下面的例子：

  @Component({
      selector: '[id=my-posts]',
      templateUrl: './../templates/posts.component.html',
      providers: [PostService]
    })

生成以下标签：

<div id="my-posts" ng-version...>InnerHTML Here </div>

我想在这个div上设置一个cssclass来指定bootstrapcol-md-3。但是我的选择器不能设置在 css class 上（这会导致与递归相关的错误）。它必须至少设置在 css id 上。幸运的是，我发现以下内容给了我想要的东西：

@Component({
  selector: '[id=all-posts][class=col-md-6]',
  templateUrl: './../templates/posts.component.html',
  providers: [PostService]
})

输出：

<div class="col-md-6" id="all-posts" ng-version="4.0.3">
...
</div>

另见

如何用angular 4 和bootstrap 4 设置多列？

How to set multiple columns with angular 4 and bootstrap 4?

css

bootstrap-4

ng-bootstrap

angular