Question

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

以下代码示例：

<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

我找到了答案，烦人地盯着我：你需要将form的班级设置为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>

Answer 2

而不是表单，您需要使用panel-block类将每个input元素括起来。

来自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。

包裹在表单标签中时，Bulma表单控件宽度被禁止

2 个答案: