Bootstrap - 如何在将容器固定到底部的同时保持自然的容器布局？答案

【问题标题】：Bootstrap - How to keep the natural container layout while fixing the container to the bottom?Bootstrap - 如何在将容器固定到底部的同时保持自然的容器布局？
【发布时间】：2014-06-28 23:31:29
【问题描述】：

我有一个使用全屏背景的 Bootstrap 单页网站。所有内容都应包含在可见屏幕内，无需滚动；即我想用固定位置准确定位不同的元素。

我目前在尝试修复包含 3 个相等列的容器时遇到问题。当我固定容器并将其放置在底部上方 70 像素处时，列会向左移动，而不是保持自然居中位置：

HTML

<div class="container front-page-widgets">

  <div class="row">

    <div class="col-md-4">

      <?php if ( dynamic_sidebar( 'front-left' ) ); ?>

    </div>
    <div class="col-md-4">

      <?php if ( dynamic_sidebar( 'front-center' ) ); ?>

    </div>
    <div class="col-md-4">

      <?php if ( dynamic_sidebar( 'front-right' ) ); ?>

    </div>
  </div>

</div>

CSS

.front-page-widgets {
    position: fixed;
    bottom: 70px;
}

非常感谢您建议如何在将容器固定到底部的同时保持自然的容器布局。

【问题讨论】：

考虑构建至少一个粗略的 jsfiddle。

标签： html css twitter-bootstrap

【解决方案1】：

您的.container 肯定会向左移动，因为您设置了position: fixed，它会按照设计粘在最左侧的站点上。

如果您想在应用position: fixed 时将Bootstrap 的.container 水平居中，您可能需要添加left: 0 和right: 0 来实现。

适用于所有分辨率。

Bootply ex.

【讨论】：