我遇到的东西很奇怪。

我有这个结构:

<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


正在占据整行并将自己定位在前两个行上方。

萤火虫中的图片:

javascript - col-md-12的Bootstrap问题-LMLPHP

由于这个原因,我无法集中讨论这两个输入,并且我不太了解。
如果我在最后一个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/

07-24 09:43
查看更多