在Bootstrap中将div对齐到页面底部

Question

我尝试使用来自堆栈问题的方法，但是尽管项目非常简单，但对我都不起作用。

<div class="fluid-container">
    <div id="app-row" class="row">
        <div id="app" class="col-xs-5">
            <div class="top-navbar">
            Top
            </div>
            <div class="bottom-navbar">
            Bottom
            </div>
        </div>
        <div id="map-container" class="col-xs-7">
            <div id="map"></div>
        </div>
    </div>
</div>

样式.css

.fluid-container {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
    width: 100%;
}

.row {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
    width: 100%;
}

html, body, .fluid-container, #app-row, #map-container {
    height: 100%
}

#app-row {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
}

#map-container {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
}

#map {
    height: 100%;
    width: 100%;
}

我想要实现的目标是：

底部指页面底部，顶部指页面顶部。

- Nominalista

Answer 1

尝试使用navbar-fixed-bottom：

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
         My footer
    </div>
</div>

- AngularBoy

---

这正是我想要的，但问题是该页脚在整个页面上，而我只想它在列（请注意col-xs-5）中。 - Nominalista

作为另一种选择，您可以尝试在要保持固定的 div 上使用 class="affix"。 - AngularBoy

我认为它没有起作用，你能贴出一个可行的例子吗？ - Nominalista

你可以在CSS中尝试这样写：.bottom-navbar {position:absolute; bottom:0;} - AngularBoy

Answer 2

只需在两个

上都加上position:fixed即可。 这里有一个示例。

- Core972

Answer 3

你可以使用Bootstrap 4的Flexbox来实现这个。

<div class="d-flex flex-column justify-content-between">
   <div></div>
   <div>bottom content</div>
</div>

- letthefireflieslive