如何缩短bulma输入？答案

【问题标题】：How to shorten bulma input?如何缩短bulma输入？
【发布时间】：2019-06-15 15:34:04
【问题描述】：

Bulma 输入宽度可以缩短吗？

正如我在他们的文档中看到的，有一个 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%

【问题讨论】：

标签： css bulma

【解决方案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>

结果：

【讨论】：

【解决方案2】：

你可以使用 size 属性：

 &lt;input class="input is-small" size="5" type="text"&gt;

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

您可以为容器类添加style="width: 33%"

<div class="container" style="width:33%">
<div class="control has-icons-left has-icons-right" style="width:33%">
    <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>

【讨论】：