Bulma CSS - 输入字段和 select 元素之间的宽度不一致
Bulma CSS - inconsistency in width between input field and select element
我需要使用 Bulma 框架创建表单,但我在创建布局时偶然发现 input/select 字段之间的宽度存在一些差异。
如下图所示:
如您所见,输入字段 (1, insert name) 和 select 元素 (2, LAbelos[=36) 之间存在差异=]) 所以我的问题是如何修复 select 的宽度以匹配上面输入字段的宽度 (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:
将此添加到 css:
.select, .select select{
width: 100%;
}
有一个 bulma class: is-fullwidth
用于此目的
我需要使用 Bulma 框架创建表单,但我在创建布局时偶然发现 input/select 字段之间的宽度存在一些差异。
如下图所示:
如您所见,输入字段 (1, insert name) 和 select 元素 (2, LAbelos[=36) 之间存在差异=]) 所以我的问题是如何修复 select 的宽度以匹配上面输入字段的宽度 (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:
将此添加到 css:
.select, .select select{
width: 100%;
}
有一个 bulma class: is-fullwidth
用于此目的