布尔玛：面板内的字段宽度短答案

【问题标题】：Bulma: Field inside Panel has short width布尔玛：面板内的字段宽度短
【发布时间】：2018-02-02 13:15:17
【问题描述】：

当我在面板内添加字段控件时，它的输入宽度很短。我尝试了很多，但无法使输入全宽。下面是我的代码示例和结果图像。

<div class="panel">
    <p class="panel-heading">
        School Data
    </p>
    <div class="panel-block">
        <div class="field">
            <label class="label">Name</label>
            <div class="control">
                <input class="input" type="text" placeholder="Text input">
            </div>
        </div>
    </div>
    <div class="panel-block">
        <button class="button is-link">
            Save
        </button>
    </div>
</div>

如何使输入字段全宽？

【问题讨论】：

标签： bulma

【解决方案1】：

面板没有具有.field 类。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">

<div class="panel">
  <p class="panel-heading">
    School Data
  </p>
  <div class="panel-block">
    <div class="control">
      <label class="label">Name</label>
      <input class="input" type="text" placeholder="Text input">
    </div>
  </div>
  <div class="panel-block">
    <button class="button is-link">
      Save
    </button>
  </div>
</div>

Bulma - Panel

【讨论】：

【解决方案2】：

已解决：我创建了自己的自定义面板。代码...

HTML

<div class="custom-panel">
    <div class="heading">
        School Data
    </div>
    <div class="body">
        <div class="field">
            <label class="label">Name</label>
            <div class="control">
                <input class="input" type="text" placeholder="Text input">
            </div>
        </div>
    </div>
    <div class="foot">
        <button class="button is-link">
            Save
        </button>
    </div>
</div>

CSS

div.custom-panel{
        border: 1px solid #dbdbdb;
        margin-bottom: 1.5rem;
        -webkit-border-radius: 3px 3px 0 0;
        -moz-border-radius: 3px 3px 0 0;
        border-radius: 3px 3px 0 0;
    }

    div.custom-panel div.heading{
        background-color: #f5f5f5;
        color: #363636;
        font-size: 1.25em;
        font-weight: 300;
        line-height: 1.25;
        padding: .5em .75em;
        border-bottom: 1px solid #dbdbdb;
        text-transform: none !important;
    }

    div.custom-panel div.foot{
        padding: .5em .75em;
        border-top: 1px solid #dbdbdb;
    }

    div.custom-panel div.body{
        padding: .5em .75em;
    }

图片（结果）

希望，它可以帮助其他人。

【讨论】：

【解决方案3】：

我通过以下方式解决了它：

<nav class="panel">
  <p class="panel-heading">Some Heading</p>
  <div class="panel-block">
    <div class="control">
      <label class="label">My Label</label>
      <input id="some_input" class="input" type="text" name="some[input]">
    </div>
  </div>
</nav>

这使得输入字段正确地扩展了它的宽度。

【讨论】：