4

When following the Bulma documentation, you can wrap an input.input with a p.control in order to style it and have it spread the width of the container. But, when the container is a form (which it is likely to be) the controls shrink down to their default size. What am I doing wrong?

Code sample below:

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

2 回答 2

9

我找到了答案，恼怒地盯着我的脸：你需要将 class 设置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>
于 2017-02-16T22:22:52.713 回答
0

您需要使用 panel-block 类来封装每个输入元素，而不是表单。

来自bulma 面板文档。

示例代码：

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

于 2017-02-16T03:08:59.087 回答