如何在Bootstrap的.container右侧放置一个div？

Question

基本上，我需要在页脚的右侧放置一个 back-to-top 按钮。

这样的事情：

我得到的是：

您可以看到页脚与视口末端之间有空格，该空格是 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中看到一个示例。您可以看到页脚高度必须为20px（min-height: 20px），而是40px。

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

我怎么能得到这个？

Answer 1

你可以使用helper class 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集团：

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

Doc：http://getbootstrap.com/css/#helper-classes-floats

Answer 2

拥有min-height代理并不意味着您的页脚将成为20px。这只意味着它的高度不会小于那个。如果您希望您的身高为20px，请使用height属性。如果由于某种原因您希望它是可变的，您可以查看max-height属性。

对于您的“回到顶部”按钮，这是我的建议：

http://jsfiddle.net/Bladepianist/38ne021p/

<强> HTML

<footer class="container-fluid navbar-inverse">
    <div class="row">
        <div class="col-xs-6">CONTENT 1</div>
        <div class="col-xs-5">CONTENT 2</div>
        <div class="col-xs-1 text-right" id="back-to-top">TOP</div>
    </div>
</footer>

<强> CSS

.container-fluid {
    color: white;
}

基本上，我将“back-tot-top”类更改为模型中的ID，但您可以根据自己的喜好自由调整。 使用col-system和text-positions类，您可以实现与问题中显示的相同的渲染。这样，back-to-top按钮就是页脚的一部分。

希望这有帮助;）。