我需要使用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>
2条答案
按热度按时间kb5ga3dv1#
将此添加到css:
参见working fiddle
gz5pxeao2#
有一个bulma类:
is-fullwidth
,用于此目的