1

我正在使用 Buefy 接口组件库在 Vue.js 上构建一个简单的待办事项列表，该组件库使用设计框架 Bulma ...

该应用程序设计为只有一个全宽页面，因此我使用了 bulma 的 Hero 布局组件：https ://bulma.io/documentation/layout/hero/

应用程序.vue：

<div id="app">

      <!-- Hero component de Buefy .start -->
      <section class="hero is-warning is-fullheight">

           <div class="title">
            <h2 v-if="after === ''">{{before}}</h2>
           <div class="container column is-one-third is-three-quarters-mobile" >
            <b-field class="name-input">
              <b-input v-model="after" placeholder="ejemplo: 'lista de la compra miercoles'">
              </b-input>
            </b-field>
            <b-button id="create-todo-btn" type="is-primary">Crear Lista</b-button>
            <b-button id="delete-todo-btn" type="is-danger" disabled>Borrar Lista</b-button>
            </div>
          </div>
          <!-- Container del Centro .start-->
        <div class="hero-body">
          <div class="container wrapper-todo">
            <h1 class="title" v-if="after !== ''">{{after}}</h1>
            <TodoItem></TodoItem>
          </div>
        </div>
        <!-- Container del Centro .end -->

          <!--Footer .start-->
         <div class="hero-foot">
            <TodoListFooter></TodoListFooter>
          </div>
        <!-- Footer .end -->

      </section>
      <!-- Hero component de Buefy .end -->

  </div>

问题是之间有太多的填充和边距<div class="title">，<div class="hero-body">我想知道是否可以在课堂上删除这个填充（或至少其中一些）.hero-body。

我查看了文档并没有看到任何东西。我也尝试过使用我自己的 css 类，它似乎没有覆盖默认样式，并且绝对不会删除任何填充。

还尝试了"is-paddingless"自定义类，它也不起作用。

4

0 回答 0