Bulma 表单控件宽度在包裹在表单标签中时被抑制

Question

在遵循 Bulma 文档时，您可以用 p.control 包裹 input.input 以便设置样式并使其扩展到容器的宽度。但是，当容器是一个表单（很可能是）时，控件会缩小到它们的默认大小。我做错了什么？

下面的代码示例：

<div class="panel">
    <div class="panel-heading">
        Login
    </div>
    <div class="panel-block">
        <form>
            <p class="control has-icon">
                <input class="input is-expanded" type="email" placeholder="E-mail Address" name="email" autofocus>
                <span class="icon is-small">
                    <i class="fa fa-envelope"></i>
                </span>
            </p>
            <p class="control has-icon">
                <input class="input is-expanded" type="password" placeholder="Password" name="password">
                <span class="icon is-small">
                    <i class="fa fa-lock"></i>
                </span>
            </p>
            <p class="control">
                <button class="button is-success" type="submit">
                    Login
                </button>
            </p>
        </form>
    </div>
</div>

Answer 1

您需要用 panel-block class.

将每个输入元素括起来，而不是表单

来自 bulma panel documentation.

示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
  <div class="panel">
    <div class="panel-heading">
        Login
    </div>

    <div class="panel-block">
      <p class="control has-icon">
        <input class="input is-expanded" type="email" placeholder="E-mail Address" name="email" autofocus>
        <span class="icon is-small">
          <i class="fa fa-envelope"></i>
        </span>
      </p>
    </div>

    <div class="panel-block">
      <p class="control has-icon">
        <input class="input is-expanded" type="password" placeholder="Password" name="password">
        <span class="icon is-small">
          <i class="fa fa-lock"></i>
        </span>
      </p>
    </div>
    <div class="panel-block">
      <p class="control">
        <button class="button is-success" type="submit">
          Login
        </button>
      </p>
    </div>
</div>

</body>
</html>

这是JS Bin。

Answer 2

我找到了答案，烦人地盯着我的脸：你需要将 form 的 class 设置为 control。

<div class="panel">
    <div class="panel-heading">
        Login
    </div>
    <div class="panel-block">
        <form class="control">
            <p class="control has-icon">
                <input class="input is-expanded" type="email" placeholder="E-mail Address" name="email" autofocus>
                <span class="icon is-small">
                    <i class="fa fa-envelope"></i>
                </span>
            </p>
            <p class="control has-icon">
                <input class="input is-expanded" type="password" placeholder="Password" name="password">
                <span class="icon is-small">
                    <i class="fa fa-lock"></i>
                </span>
            </p>
            <p class="control">
                <button class="button is-success" type="submit">
                    Login
                </button>
            </p>
        </form>
    </div>
</div>

Bulma 表单控件宽度在包裹在表单标签中时被抑制

Bulma form control width inhibited when wrapped in form tag

html

css

bulma