如何缩短布尔输入？

Question

可以缩短布尔输入吗？如我所见，文档中只有一个is-small参数，它仅使font和height变小。

如我所见，文档中只有一个is-small参数，这只会使字体和高度变小。

 <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

您可以使用 size 属性：

 <input class="input is-small" size="5" type="text">

Answer 2

小解决方法：使用列

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

结果：

Answer 3

您可以添加style="width: 33%;"作为输入

<input class="input is-small m-r-5" type="text" style="width: 33%;" placeholder="Exxxxx">