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

laawzig2  于 2023-01-03  发布在  其他
关注(0)|答案(2)|浏览(99)

我需要使用Bulma框架创建表单,但在创建布局时,我偶然发现了输入/选择字段之间的宽度差异。
如下图所示:

正如您所看到的,输入字段(1,* 插入名称 )和选择元素(2, LAbelos )之间存在差异,因此我的问题是如何固定选择的宽度以匹配上面输入字段(1, 插入名称 *)的宽度
代码如下:

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

小提琴是这样的:
https://jsfiddle.net/Svinjica/kzp6L5eh/34/

kb5ga3dv

kb5ga3dv1#

将此添加到css:

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

参见working fiddle

gz5pxeao

gz5pxeao2#

有一个bulma类:is-fullwidth,用于此目的

相关问题