html - Bulma CSS - 输入字段和选择元素之间的宽度不一致

Question

我需要使用 Bulma 框架创建表单，但我在创建布局时偶然发现输入/选择字段之间的宽度存在一些差异。

如下图所示:

如您所见，输入字段 (1, insert name) 和选择元素 (2, LAbelos) 之间存在差异，所以我的问题是如何固定宽度选择匹配上面输入字段的宽度 (1, insert name)

代码如下:

<br />
<div class="columns">
  <div class="column is-4">
    <div class="columns is-desktop">

      <div class="column is-3">
        <p>
          <label>
                Awesome labelsss
              </label>
        </p>
      </div>
      <div class="column is-7">
        <div class="field">
          <div class="select">
            <select>
              <option>Select dropdown</option>
              <option>With options</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div>
      <br />
      <div class="columns is-desktop">
        <div class="column is-3">
          <p>
            <label>
                  Some text
                </label>
          </p>
        </div>
        <div class="column is-7">
          <div class="field is-horizontal">
            <div class="field-body">
              <div class="field">
                <p class="control">
                  <input class="input" type="text" data-precision="5">
                </p>
              </div>
              <div class="field is-narrow">
                <p class="control is-expanded">
                  <span class="select is-fullwidth" style="width: 79px !important;">
                        <select id="Unit" name="unitID"  style="height: 36px !important;">
                         <option>Select dropdown</option>
        <option>With options</option>
                        </select>
                      </span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <br />

    <div class="columns is-desktop">
      <div class="column is-3">
        <p>
          <label>
                date ee
              </label>
        </p>
      </div>
      <div class="column is-7">
        <div class="field">
          <div class="control has-icons-right">
            <input class="input" name="dateLinked" type="date" id="LinkDate" data-range="-100:+2">
            <span class="icon is-small is-right" style="cursor: pointer;">
                  <i class="icon-calendar"></i>
                </span>
          </div>
        </div>
      </div>
    </div>

    <div class="columns is-desktop">
      <div class="column is-3">
        <p>
          <label>
                date ss
              </label>
        </p>
      </div>
      <div class="column is-7">
        <div class="field">
          <div class="control ">
            <input class="input" id="UnlinkDate" type="date" data-range="-100:+2">
            <span class="icon is-small is-right" style="cursor: pointer;">
                  <i class="icon-calendar"></i>
                </span>
          </div>
        </div>
      </div>
    </div>

    <div class="columns is-desktop">
      <div class="column is-3">
        <p>
          <label>
                Insert name
              </label>
        </p>
      </div>
      <div class="column is-7">
        <div class="field">
          <div class="control">
            <input class="input" id="Name" name="name" type="text">
          </div>
        </div>
      </div>
    </div>

    <div class="columns is-desktop">
      <div class="column is-3">
        <p>
          <label>
                LAbelos
              </label>
        </p>
      </div>
      <div class="column is-7">
        <div class="field">
          <div class="select">
            <select>
              <option>Select dropdown</option>
              <option>With options</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <div class="columns is-desktop">
      <div class="column is-3">
        <p>
          Another 1 text
        </p>
      </div>
      <div class="column is-7">
        <div class="field">
          <div class="control">
            <input class="input numeric" id="TableNumber" name="tableNumber" type="text">
          </div>
        </div>
      </div>
    </div>

    <div class="columns is-desktop">
      <div class="column is-3">
        <p>
          <label>
                Another select
              </label>
        </p>
      </div>
      <div class="column is-7">
        <div class="field">
          <div class="select">
            <select>
              <option>-</option>
              <option>Select dropdown</option>
              <option>With options</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="columns is-desktop">
      <div class="column is-3">
        <p>
          <label>
                Some tekxt
              </label>
        </p>
      </div>
      <div class="column is-7">
        <div class="field">
          <div class="select">
            <select>
              <option>-</option>
              <option>Select dropdown</option>
              <option>With options</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <div class="columns is-desktop">
      <div class="column is-3">
        <p>
          <label>
                Some number
              </label>
        </p>
      </div>
      <div class="column is-7">
        <div class="field">
          <div class="control">
            <input class="input" type="text">
          </div>
        </div>
      </div>
    </div>

  </div>
  <div class="column is-8">
    <div class="somebackground"></div>
  </div>
</div>

这是 fiddle :

https://jsfiddle.net/Svinjica/kzp6L5eh/34/

Answer 1

将此添加到 CSS:

.select, .select select { 
width: 100%;
}

参见 working fiddle