我遇到的东西很奇怪。
我有这个结构:
<div class="row filterRes">
<div class='col-xs-6 col-sm-6 col-md-6'>
<div class="form-group">
<div class='input-group date' id='datetimepickerFrom'>
<input type='text' class="form-control action" placeholder="Från" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-xs-6 col-sm-6 col-md-6'>
<div class="form-group">
<div class='input-group date' id='datetimepickerTo'>
<input type='text' class="form-control action" placeholder="Till" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<button class="btn btn-primary btn-block col-md-12 ">Filtrera</button>
</div>
</div>
我的问题:
类的最后一个div =
col-md-12
正在占据整行并将自己定位在前两个行上方。
萤火虫中的图片:
由于这个原因,我无法集中讨论这两个输入,并且我不太了解。
如果我在最后一个div上设置:
col-xs-6 col-sm-12 col-md-12
问题消失了,但问题得以解决。
当我添加课程时
row
我得到相同的结果
我在这里做错了什么?
最佳答案
您应该有2行而不是1行。行设计为具有12个分区。您正在填写12,因此破坏了功能。这是working example
的HTML
<div class="row filterRes">
<div class='col-xs-6 col-sm-6 col-md-6'>
<div class="form-group">
<div class='input-group date' id='datetimepickerFrom'>
<input type='text' class="form-control action" placeholder="Från" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-xs-6 col-sm-6 col-md-6'>
<div class="form-group">
<div class='input-group date' id='datetimepickerTo'>
<input type='text' class="form-control action" placeholder="Till" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<button class="btn btn-primary btn-block col-md-12 ">Filtrera</button>
</div>
</div>
-----------编辑-----------------
看完示例之后,我看到它与列的相对位置有关。固定的插头:https://jsfiddle.net/8mfe3f3a/1/