Question

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

<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>

如何使输入字段全宽？

Answer 1

小组没有有.field类。

＆＃13;

<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>

＆＃13;

Bulma - Panel

Answer 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;
    }

图片（结果）

希望，这可能有助于其他人。

Answer 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>

这使得输入字段正确扩展其宽度。

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

3 个答案: