Twitter Bootstrap. 3列带页眉和页脚

Question

我正在尝试使用Twitter Bootstrap 3制作一个非常简单的布局。

它基本上是一个粘性标头（始终位于视口顶部），一个位于内容底部的页脚（不固定在视口底部），以及两者之间的三列。左右两个固定宽度为200像素，中间列根据屏幕宽度而定。

我已经尝试了太多方法来做到这一点，现在有点失控了。请有人帮帮我。

编辑1（5）：我的页眉页脚布局代码。我已经尝试了太多不同的方法来实现三列。另一个尝试的编辑。问题在于a)列是流体的，b）12列布局在左边，没有占用整个宽度。

    <div class="container-full">      
        <div class="navbar navbar-static-top">  
            <div class="navbar-inner blue-bg">
                <a href="#" class="brand"><img src="images/kab/logo-header.png" alt="KAB Logo Large"/></a>
            </div>
        </div>  

        <div class="container-full">    
            <div class="row-fluid">

                <div class="span1">
                    <h4>Left Column</h4>
                </div>

                <div class="span10">
                    <h4>Center Content</h4>
                </div>

                <div class="span1">
                    <h4>Right Column</h4>
                </div>
            </div>

        </div>

        <div class="navbar navbar-fixed-bottom">
            <div class="navbar-inner blue-bg" style="height: 77px;"> </div>
        </div>
    </div>

编辑2: 添加了一个尝试使用DIV的可怕尝试，但这不是使用框架的目的吗？

编辑3: 理想布局的结构

    +------------------------------------------------------+
    |                       Header                         |
    +------------+------------------------------+----------+
    |            |                              |          |
    |            |                              |          |
    |  Fixed     |       Fluid Column           |  Fixed   |
    |  200px     |                              |  200px   |
    |            |                              |          |
    |            |                              |          |
    |            |                              |          |
    |            |                              |          |
    |            |                              |          |
    +------------+------------------------------+----------+
    |                        Footer                        |
    +------------------------------------------------------+

编辑4：这里有一个我在这里找到并适应的fiddle，但右侧有一些空白。此外，在实现此类型的布局时，是否这是最佳实践？

http://jsfiddle.net/FzVtx/123/

- Steve_M

---

你能在这里或者在一个fiddle中展示一些代码吗？ - Sidney Gijzen

@MF82 这是一个 Fiddle。我调整了在别处找到的一个，但它还不太正确，而且我不完全确定这是否是正确的方法。 [链接]（http://jsfiddle.net/FzVtx/123/） - Steve_M

没人吗？我还没有解决这个问题 - 这么简单的事情让我抓狂！ - Steve_M

你在谈论BT3，但是"span1或span10"已经过时了...你应该使用'col-[xs-sm-md-lg]-1'。http://getbootstrap.com/css/#grid-options - BENARD Patrick

这是我能找到的最好的：http://www.bootply.com/9logoZy2fv - dessalines

Answer 1

如果有人仍在使用BS3，并想知道如何获得这种设计，这就是解决方案：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<style>
/* 
This for the 200px. 
Put as comments cause it's breaking the view to 3 nested divs on many small-screen divices.

.col-xs-2 {min-width: 200px;}
*/
</style>
<div class="container-fluid text-center">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">Header</div>
  </nav>
  <div class="row" style="margin-top: 50px;">  
    <div class="col-xs-2">
      <h4>Left Column</h4>
    </div>
    <div class="col-xs-8">
      <h4>Center Content</h4>
    </div>
    <div class="col-xs-2">
      <h4>Right Column</h4>
    </div>
  </div>
  <div class="col-12">
    <div class="container">Footer</div>
  </div>
</div>

- A. Meshu

Answer 2

我不知道如何使用Bootstrap来实现它。但是通常的做法是这样的。

首先设置一个宽度为100%的页眉； 然后设置三个div，左侧div宽度为200px并向左浮动，右侧div宽度为200px并向右浮动，两者都设置display:block属性。中间的div设置display:inline-block属性； 最后设置一个宽度为100%的页脚。

- Dan Neciu