我正在努力让 bulma 用背景色填充我的整个列高度。相反,它似乎只将背景颜色应用于 column
div 中的元素。
我希望左栏的紫色背景填满页面的整个高度。
这是我的 HTML...
<template>
<div class="page">
<div class="columns is-gapless is-desktop is-vcentered">
<div class="column has-background-primary">
<h1 class="title is-1 has-text-white">SEPA { Logging }</h1>
</div>
<div class="column">
<section class="login-form">
<b-field label="Username" type="is-success" message="This username is available">
<b-input value="johnsilver" maxlength="30"></b-input>
</b-field>
<b-field label="Password">
<b-input type="password" value="iwantmytreasure" password-reveal></b-input>
</b-field>
<b-field>
<button class="button is-primary">Login</button>
</b-field>
</section>
</div>
</div>
</div>
</template>
这是我希望能填满整个背景的部分..
<div class="column has-background-primary">
<h1 class="title is-1 has-text-white">SEPA { Logging }</h1>
</div>
还有我的CSS...
.columns {
display: flex;
height: 100vh;
}
.login-form {
padding-left: 50px;
padding-right: 50px;
}
最佳答案
.is-vcentered
类垂直对齐列中的内容,但它也使这些 div 仅占用该内容所需的高度,因此背景不会占用全部高度.
删除 .is-vcentered
类并使用一些额外的 CSS 使这些列中的内容居中。
.columns {
display: flex;
height: 100vh;
}
.login-form {
padding-left: 50px;
padding-right: 50px;
}
/* Use something like this to center the content inside the columns
Suggest using better classes to select them based on your project
.column elements have .is-flex added to make them flex
*/
.title, .login-form {
margin: auto 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
<div class="page">
<div class="columns is-gapless is-desktop">
<div class="column is-flex has-background-primary">
<h1 class="title is-1 has-text-white">SEPA { Logging }</h1>
</div>
<div class="column is-flex">
<section class="login-form">
<label label="Username" type="is-success" message="This username is available">
<input value="johnsilver" maxlength="30"></b-input>
</label>
<label label="Password">
<input type="password" value="iwantmytreasure" password-reveal></input>
</label>
<b-field>
<button class="button is-primary">Login</button>
</b-field>
</section>
</div>
</div>
</div>
关于html - 如何在 bulma 列中设置全高背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56088614/