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

Question

我有一个 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;
}

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

Answer 1

肯定是您的 .container 移到了左边，因为您设置了 position: fixed 并且它按照设计固定在最左边的站点。

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

适用于所有分辨率。

Bootply ex.