如何在 3 个块中更改我的页面 HTML？答案

【问题标题】：How can I change my page HTML in 3 Blocks?如何在 3 个块中更改我的页面 HTML？
【发布时间】：2019-10-11 01:20:00
【问题描述】：

嘿，我想这样设置我的 HTML 样式：

我目前有这个：

<app-list-employees></app-list-employees>
<app-book-employee></app-book-employee>
<app-calendar-books></app-calendar-books>

如果您有解决方案，我也会使用 Bootstrap。我的styles.scss 文件是空的。

编辑： 我在组件周围有一些 DIV，例如：

<div class="row text-center">

在 listEmployees 组件中或

<div class="panel panel-primary">

和

<form class="form-horizontal" [formGroup]="deviceForm" (ngSubmit)="onSubmit()">

在 CreateEmployee 组件中。

【问题讨论】：

标签： angular sass bootstrap-4 styles

【解决方案1】：

您可以使用您正在使用的 Bootstrap。

<div class="row">
  <div class="col-6">
    <app-list-employees></app-list-employees>
  </div>
  <div class="col-6">
    <div><app-book-employee></app-book-employee></div>
    <div><app-calendar-books></app-calendar-books></div>
  </div>
</div>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-6">
    Employee List
  </div>
  <div class="col-6">
    <div>Book Employee</div>
    <div>Calendar Books</div>
  </div>
</div>

如果您希望行的高度相同，请使用.row-eq-height

【讨论】：

这对我不起作用。现在组件像以前一样垂直向下移动。
@JustHeadache 检查与 Bootstrap 一起使用的演示 sn-p。
我确定我使用的是 Bootstrap，因为我在和中的输入字段中设置了表格样式 app-book-employee> 用它。
那个有效，但你能解释一下为什么有效吗？我已经安装了引导程序，但它之前没有工作
@JustHeadache 不确定首先出了什么问题。也许，我现在用div 包围它。我很高兴它终于有所帮助。祝你好运。

【解决方案2】：

你可以像这样使用Angular Flex Layout：

<div>
    <div fxFlex="row">
        <div style="background:red" fxFlex="column">List employees</div>
        <div fxFlex="column">
            <div style="background:yellow">Book Employee</div>
            <div style="background:green">Calendar Book</div>
        </div>
    </div>
</div>

【讨论】：

和以前一样的错误：它垂直显示在我的页面下方... [链接]：i.imgur.com/Ar9jYMe.png
你有围绕这些组件的容器吗？你能显示更多代码吗？

【解决方案3】：

<div class="row">
  <div class="col-6">
    <app-list-employees></app-list-employees>
  </div>
  <div class="col-6">
    <div class="row">
      <div class="col-6">
        <app-book-employee></app-book-employee>
      </div>
      <div class="col-6">
        <app-calendar-books></app-calendar-books>
      </div>
    </div>
  </div>
</div>

【讨论】：