如何在Vue.js中使用Bulma调整输入框尺寸？

使用Bulma框架时，输入框会默认拉伸至全屏宽度，希望将用户输入框居中并设置为约四分之一屏幕宽度。尝试给div添加is-size-3类、给input设置size="5"等操作均无效果，代码示例如下：

<template>
  <section>
    <form >
      <div class="is-size-3" >
        <div class="has-text-centered">
          <h1 class="title is-3">User registration</h1>
          <form class="box">
            <div class="field">
              <label class="label">Username</label>
              <div class="control">
                <input
                 class="input is-small"
                 size="5"
                  type="text"
                  v-model="enteredTask"
                  placeholder="name"
                />
                <!-- @keyup.enter="enterUser" -->
              </div>
            </div>
            <button class="button is-primary" @click="enterUser">OK</button>
            <p v-if="enteredTask.length > 10">input is too long.</p>
          </form>
        </div>
      </div>
    </form>
  </section>
</template>

Bulma的.input类默认设置了width: 100%，因此直接修改input的size属性或给无关div加尺寸类无法改变宽度，需要通过限制父容器宽度并配合居中布局来实现需求，同时先修正代码中**嵌套两层<form>**的不规范问题，以下是两种可行方案：

方案1：利用Bulma列布局实现 #

借助Bulma的columns系统，直接指定容器宽度并居中：

<template>
  <section>
    <div class="has-text-centered">
      <h1 class="title is-3">User registration</h1>
      <form class="box">
        <!-- 列容器居中，内部列占四分之一宽度 -->
        <div class="columns is-centered">
          <div class="column is-one-quarter">
            <div class="field">
              <label class="label">Username</label>
              <div class="control">
                <input
                  class="input is-small"
                  type="text"
                  v-model="enteredTask"
                  placeholder="name"
                />
              </div>
            </div>
          </div>
        </div>
        <button class="button is-primary" @click="enterUser">OK</button>
        <p v-if="enteredTask.length > 10">input is too long.</p>
      </form>
    </div>
  </section>
</template>

• 核心逻辑：.columns is-centered让列容器内的内容水平居中，.column is-one-quarter将输入框的父容器宽度设为外层.box的四分之一，input会自动继承该宽度。

方案2：自定义容器宽度+Bulma居中类 #

如果不想使用列布局，可直接给输入框的父容器设置宽度并设为行内块元素：

<template>
  <section>
    <div class="has-text-centered">
      <h1 class="title is-3">User registration</h1>
      <form class="box">
        <!-- 行内块容器+25%宽度，配合外层居中 -->
        <div class="field is-inline-block" style="width: 25%;">
          <label class="label">Username</label>
          <div class="control">
            <input
              class="input is-small"
              type="text"
              v-model="enteredTask"
              placeholder="name"
            />
          </div>
        </div>
        <button class="button is-primary" @click="enterUser">OK</button>
        <p v-if="enteredTask.length > 10">input is too long.</p>
      </form>
    </div>
  </section>
</template>

• 核心逻辑：.is-inline-block避免容器占满整行，width: 25%直接将容器设为四分之一宽度，外层的.has-text-centered确保整个表单内容居中对齐。

内容的提问来源于stack exchange，提问作者Hieronymus