如何缩短布尔玛输入？

Question

是否可以缩短布尔玛输入宽度？

正如我在他们的文档中看到的那样，有一个is-small参数，但它只会使字体和高度变小。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.css" integrity="sha256-8BrtNNtStED9syS9F+xXeP815KGv6ELiCfJFQmGi1Bg=" crossorigin="anonymous" />

<div class="container">
  <div class="control has-icons-left has-icons-right">
    <input class="input is-small m-r-5" type="text" placeholder="Exxxxx">
    <span class="icon is-small is-left">
        <i class="fa fa-envelope"></i>
      </span>
    <span class="icon is-small is-right">
        <i class="fa fa-check"></i>
      </span>
  </div>
</div>

正如我们在下面的屏幕截图中看到的，它通过容器传播：

我想将其宽度从 100% 缩短到大约 33%

Answer 1

小解决方法：使用列

<div class="container">
    <div class="columns">
      <div class="column is-one-fifth">
        <div class="control has-icons-left has-icons-right">
          <input class="input" type="text" placeholder="Exxxxx">
          <span class="icon is-small is-left">
            <i class="fa fa-envelope"></i>
          </span>
          <span class="icon is-small is-right">
            <i class="fa fa-check"></i>
          </span>
        </div>
      </div>
    </div>
  </div>

结果：