Question

我正在努力使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;
}

Answer 1

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

如何在bulma列中设置全高背景色？

1 个答案: