我有一个类form- horizontal
的表单,并且我试图使list-inline
与类form-control
一起工作,但是两者似乎不能很好地一起工作:
没有form-control
:
<form class="form-horizontal">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<div class="form-group">
<div class="controls">
<label for="years_of_experience" class="col-sm-3 control-label">Time Period</label>
<div class="col-sm-7">
<ul class="list-inline">
<li>
<select >
<option value="">Choose...</option>
</select>
</li>
<li>
<input type="text" style="width: 60px;" maxlength="4" class="year" placeholder="Year"> <span class="to">–</span>
</li>
<li>
<div class="ended-position">
<select >
<option value="">Choose...</option>
</select>
<input type="text" style="width: 60px;" maxlength="4" placeholder="Year">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</form>
jsFiddle
使用
form-control
:<form class="form-horizontal">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<div class="form-group">
<div class="controls">
<label for="years_of_experience" class="col-sm-3 control-label">Time Period</label>
<div class="col-sm-7">
<ul class="list-inline">
<li>
<select class="form-control">
<option value="">Choose...</option>
</select>
</li>
<li>
<input type="text" class="form-control" style="width: 60px;" maxlength="4" class="year" placeholder="Year"> <span class="to">–</span>
</li>
<li>
<div class="ended-position">
<select class="form-control">
<option value="">Choose...</option>
</select>
<input type="text" class="form-control" style="width: 60px;" maxlength="4" placeholder="Year">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</form>
jsFiddle
我已经用谷歌搜索了,但是找不到我的问题的答案(也许我的关键词是错误的)。
我的问题是这样的:
为什么
list-inline
无法与form-control
一起使用?以及可能的解决方法(修复/解决方案)是什么?更新:
我得到了更多,
inline
,但仍然无法正常工作:jsfiddle仍在尝试找出为什么它无法正常工作...
最佳答案
它没有内联对齐,因为您没有提供内联它们的空间
解决方案是为它们分配col width
, working demo here
用<li>
代替简单的<li class="col-xs-3">
<li class="col-xs-3">
<input type="text" class="form-control" maxlength="4" class="year" placeholder="Year" />
</li>
为什么这样有效? :由于您没有提到
col
的大小,因此所有<li>
均按照其width
对齐,从而将其他<li>
放在旁边关于html - Bootstrap3列表内联无法与表单控件一起使用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20796885/