如何在Bulma框架中实现表单字段的全宽显示？

嘿，我来帮你搞定这个Bulma表单全宽的问题！看你的代码片段，你已经尝试了.is-fullwidth和.is-expanded类，但可能漏了几个关键设置，我给你梳理下正确的做法：

关键修正点 #

• 给表单控件添加.is-fullwidth类：Bulma的input、textarea等表单控件默认不会自动占满父容器宽度，必须给它们加上.is-fullwidth才能拉伸到全宽。
• 给表单本身添加.is-fullwidth类：因为.panel-block是flex布局容器，表单作为它的子元素，需要明确声明占满可用宽度，否则会被内容撑开而不是全宽。

修正后的完整代码示例 #

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<nav id="login" class="panel">
  <p class="panel-heading">Login</p>
  <div class="panel-block">
    <!-- 给表单添加.is-fullwidth -->
    <form name="LoginForm" action="/login/" method="post" class="is-fullwidth">
      <div class="field is-fullwidth">
        <label class="label">Username</label>
        <div class="control">
          <!-- 给输入框添加.is-fullwidth -->
          <input class="input is-fullwidth" type="text" placeholder="Your username">
        </div>
      </div>
      <div class="field is-fullwidth mt-4">
        <label class="label">Password</label>
        <div class="control">
          <input class="input is-fullwidth" type="password" placeholder="Your password">
        </div>
      </div>
      <div class="field is-fullwidth mt-4">
        <div class="control">
          <button class="button is-primary is-fullwidth">Login</button>
        </div>
      </div>
    </form>
  </div>
</nav>

额外优化（可选） #

如果觉得.panel-block的默认内边距太窄，可以自定义CSS调整：

.panel-block {
  padding: 1.5rem; /* 增大内边距，让表单更美观 */
}

这样调整后，你的表单字段就能完美铺满整个面板宽度啦！

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