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

Question

I am having a Bootstrap one-page website, which uses a full-screen background. All content should be contained within the visible screen without having to scroll; ie I want to exactly position different elements with a fixed position.

I am currently stuck while trying to fix a container containing 3 equal columns. When I am fixing the container and position it 70px above the bottom, the columns move to left instead of keeping the natural centered position:

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

Would appreciate your advise how to keep the natural container layout while fixing the container to the bottom.

Answer 1

Surely your .container moves to left because you set the position: fixed and it sticks to the very left site as designed.

If you want to center the Bootstrap's .container horizontally while position: fixed is applied you may need to add left: 0 and right: 0 to achieve that.

Works on all resolutions.

Bootply ex.