Html bulma:水平窗体控件未正确展开
我有一个文本输入和两个选择,我想把他们水平。基于bulma css框架,这就是我应该做的:Html bulma:水平窗体控件未正确展开,html,css,bulma,Html,Css,Bulma,我有一个文本输入和两个选择,我想把他们水平。基于bulma css框架,这就是我应该做的: <div class="field is-horizontal"> <div class="field-body"> <div class="field"> <p class="control is-expanded has-icons-left"> <input class="input" type
<div class="field is-horizontal">
<div class="field-body">
<div class="field">
<p class="control is-expanded has-icons-left">
<input class="input" type="text" placeholder="Search" name="id" id="id">
<span class="icon is-small is-left"><i class="fa fa-search"></i></span>
</p>
</div>
<div class="field">
<p class="control">
<span class="select">
<select name="status" id="status">
<option value="">Status:</option>
<option value="active">active</option>
<option value="pause">pause</option>
</select>
</span>
</p>
</div>
<div class="field">
<p class="control">
<span class="select">
<select name="limit" id="limit">
<option value="">Limits:</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</span>
</p>
</div>
</div>
通常情况下,最后2个选择应采用实际宽度,第一个输入应展开,直到占用可用空间,但我得到的是:
“添加范围”缩小到要缩小的字段:
<div class="field is-narrow">
工作示例:添加到要缩小的字段:
<div class="field is-narrow">
工作示例:您需要将控件展开与选择为全宽相结合
以下是一个例子:
@导入url'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css';
地位: 忙碌的 暂停
限制: 10 20
您需要将控件扩展为“选择为全宽” 以下是一个例子: @导入url'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css';
地位: 忙碌的 暂停
限制: 10 20