当包装一个Bulma“field”样式的元素在一个有角度的组件中时,底部的边距是缺失的。field类是通过@hostbinding('class')类='field'
指令添加到组件中的,这是根据浏览器的正常工作。
我怀疑.field:not(:last-child)
选择器可能有问题,但我想不出原因。
Stackblitz演示
app.component.html
<div class="field">
<label class="label">Test
<div class="control">
<input type="text" class="input" />
</div>
</label>
</div>
<div class="field">
<label class="label">Test
<div class="control">
<input type="text" class="input" />
</div>
</label>
</div>
<app-input></app-input>
<app-input></app-input>
input.component.html
<label class="label">Test
<div class="control">
<input type="text" class="input" />
</div>
</label>
Input.Component.TS
import { Component, HostBinding, OnInit } from '@angular/core';
@Component({
selector: 'app-input',
templateUrl: './input.component.html',
styleUrls: ['./input.component.css']
})
export class InputComponent implements OnInit {
@HostBinding('class') classes = 'field';
constructor() { }
ngOnInit(): void {
}
}
这个问题在某种程度上建立在这个答案的基础上
问题是输入组件没有设置display属性。因此它被呈现为display:inline,它不能处理任何边距。
第一种解决方案:
将以下代码段添加到input.component.css中:
:host { display: block; }
方法1的工作示例
第二种解决方案:
将is-block添加到input.component.ts的CSS-类中
@HostBinding('class') classes = 'field is-block';
方法2的工作示例
希望这有帮助,圣诞快乐,结束和出去;-)