col-md-12

Question

我遇到了一些非常奇怪的东西。

我有这个结构：

<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>

我的问题：

class =

的最后一个div

 col-md-12

占据了整个行并将其自身定位在前两个行上。

萤火虫中的图像：

由于这个原因我无法关注这两个输入，我真的不明白它。 如果我在最后一个div上设置它：

col-xs-6 col-sm-12 col-md-12

这个问题消失了但问题仍然存在。 当我添加课程

 row

我得到了相同的结果

我在这里做错了什么？

Answer 1

您应该有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>

-----------编辑-----------------

在有了插件示例之后，我看到它与列的相对位置有关。固定的plunkr：https://jsfiddle.net/8mfe3f3a/1/

Answer 2

添加一行：

我可能错了，但这可能是一个问题：

<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 class="col-xs-12 col-sm-12 col-md-12">
    <div class="row">
        <button class="btn btn-primary  btn-block col-md-12  ">Filtrera</button>
    </div>
</div>

每一列都需要用一行包裹，因为行清除浮动。

删除btn列

另一方面你的按钮不需要12列，btn-block isady为你做了

<div class="col-xs-12 col-sm-12 col-md-12">
    <button class="btn btn-primary btn-block">Filtrera</button>
</div>

Answer 3

使用类Row

添加div

i