如何在Bootstrap中的.container右边放一个div？

Question

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

像这样：

我得到的是：

可以看到footer和viewport的末尾之间有一个空白space，那space就是[=36=的高度]back-to-top 按钮，如果我删除该按钮，空白 space 也会被删除。

我正在使用 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

您可以使用助手 class 向右拉并在容器前移动 TOP link：

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

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

Answer 2

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

对于您的 "back-to-top" 按钮，这是我的建议：

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" class 更改为我模型中的 ID，但您可以根据自己的喜好随意调整它。使用 col-system 和文本位置 classes，您可以获得与您在问题中显示的相同的渲染。这样，back-to-top 按钮就是页脚的一部分。

希望对您有所帮助 ;)。

如何在Bootstrap中的.container右边放一个div？

How to put a div to the right of .container in Bootstrap?

css

twitter-bootstrap

twitter-bootstrap-3