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

Question

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

我目前在尝试修复包含3个相等列的容器时陷入困境。 当我固定容器并将其定位在底部上方70px处时，列将向左移动而不是保持自然居中位置：

的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肯定会.container移动，因为您设置了position: fixed并且按设计.container在最左边的位置。

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

适用于所有分辨率。

Bootply前。