Bulma框架下如何缩小输入框宽度并实现响应式居中？

嘿，我来帮你搞定这个Bulma输入框的难题！你遇到的问题主要是因为Bulma的.control组件默认是块级元素，会占满父容器的宽度，而且直接给.field加textAlign: center对块级子元素无效——它只对行内/行内块元素生效。另外，Bulma自带了一套响应式布局类，用它来实现需求比自定义CSS更省心。

下面给你两种可行的解决方案，推荐第一种（纯Bulma类实现）：

方案一：用Bulma内置类实现（推荐） #

我们可以通过给.control添加行内块类和宽度类，再配合父元素的居中类来实现效果，而且自带响应式适配：

<div className="field has-text-centered">
  <p className="control has-icons-left has-icons-right is-inline-block is-one-third">
    <input 
      onChange={this.handleChange} 
      name="username" 
      value={this.state.username} 
      className="input is-rounded" 
      type="text" 
      placeholder="Username" 
    />
    <span className="icon is-small is-left">
      <i className="fas fa-user"></i>
    </span>
    <span className="icon is-small is-right">
      <i className="fas fa-check"></i>
    </span>
  </p>
</div>

代码说明： #

• .has-text-centered：给父元素.field添加这个类，让内部的行内/行内块元素水平居中
• .is-inline-block：把.control从块级改成行内块，这样父元素的text-align: center能生效
• .is-one-third：Bulma的宽度类，设置.control宽度为父容器的1/3，默认在移动端会自动变成100%宽度（完美适配响应式）

如果需要更精细的响应式控制，可以替换宽度类为组合类，比如：
is-one-third-desktop is-half-tablet is-full-mobile——这样在桌面端占1/3，平板占1/2，移动端全屏。

方案二：自定义CSS实现（适合特殊需求） #

如果你更习惯用自定义样式，需要解决两个问题：让父容器居中，同时限制输入框宽度。注意要给.control也设置宽度（或者让它继承父容器宽度）：

首先添加自定义CSS（可以放在你的样式文件里）：

.custom-form-container {
  width: 33%;
  margin: 0 auto; /* 块级元素水平居中的关键 */
}

/* 响应式适配：小屏幕下全屏 */
@media (max-width: 768px) {
  .custom-form-container {
    width: 100%;
  }
}

然后修改JSX结构：

<div className="field custom-form-container">
  <p className="control has-icons-left has-icons-right">
    <input 
      onChange={this.handleChange} 
      name="username" 
      value={this.state.username} 
      className="input is-rounded" 
      type="text" 
      placeholder="Username" 
    />
    <span className="icon is-small is-left">
      <i className="fas fa-user"></i>
    </span>
    <span className="icon is-small is-right">
      <i className="fas fa-check"></i>
    </span>
  </p>
</div>

这样也能实现你要的居中+响应式效果，不过需要自己维护媒体查询，不如方案一省心。

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