将作为按钮的引导列的内容移到非常底部

Question

我的HTML

<div class="col-sm-5">some content</div>
<div class="col-sm-1">
    <button class="fa fa-plus-circle" type="button"></button>
</div>
<div class="col-sm-6">some other content</div>

My css

position: absolute;
bottom: 10px;
left: 0px;
right: 0px;
color: #fff;
margin: 0px auto;
text-align: center;
font-size: 40px;

我想让加号按钮下来。根据上面的代码，它将到达精确的正确位置，不管如何-sm-6坚持自己向左，因为按钮是绝对的。

我正在使用引导3

我怎样才能解决这个问题？

谢谢

Answer 1

也许试试这个。

<div class="row">
<div class="col-sm-5">some content</div>
//put all other content you want in a grid-1 here
</div>
<div class="row">
<div class="col-sm-12">
<button class="fa fa-plus-circle" type="button"></button>
</div>
<div class="row">
<div class="col-sm-6">some other content</div>
//content for the remaining grid-2

这可能会使您的设计成为

-网格1

-加法圈

-网格2

您所做的错误是您在这里没有遵循引导网格约定。

另外，由于某些原因，您还没有描述添加CSS的类、ID和标记。

最后，确保您的CSS低于引导CSS。