css - 如何在 Bootstrap 中将 div 放在 .container 的右边？

Question

基本上，我需要在页脚右侧放置一个返回顶部按钮。

是这样的:

我得到的是这样的:

你可以看到在footer 和视口(viewport)的末端之间有一个空格，这个空格是back-to-top 按钮的高度，如果我删除按钮的空格也被删除了。

我正在使用 Bootstrap ，所以我的 html 代码类似于:

<footer class="container-fluid">
    <div class="container">
        <div class="content1>CONTENT 1</div>
        <div class="content2>CONTENT 2</div>
    </div>

    <div class="back-to-top>TOP</div>
</footer>

您可以在 Bootply 中查看示例.您可以看到页脚高度必须为 20 像素(min-height: 20px)，但它是 40px。

我认为，如果我可以将 .back-to-top div 放在 .container div 旁边，我的问题就会得到解决。

我怎样才能得到这个？

Answer 1

您可以使用助手类 pull-right 并在容器之前移动 TOP 链接:

<footer class="container-fluid">
    <div class="back-to-top pull-right">TOP</div>
    <div class="container">
        <div class="content1>CONTENT 1</div>
        <div class="content2>CONTENT 2</div>
    </div>
</footer>

您需要删除您的 CSS block :

.back-to-top {
    float: right;
    position: relative;
    top: -20px;
}

文档:http://getbootstrap.com/css/#helper-classes-floats