Twitter引导程序。3列的页眉和页脚

Question

我正在尝试找出如何使用Twitter bootstrap 3进行非常简单的布局。

它基本上是一个粘性页眉（始终位于视口的顶部），一个页脚位于内容的底部（未固定至视口的底部），然后位于两三列之间。左边和右边的宽度是固定的（200px），中间的列是可变的，取决于屏幕的宽度。

我已经尝试了太多的方法来完成这项工作，但现在我开始略有失落。有人可以帮我吗。

编辑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：这是我在这里发现的小提琴，并对其进行了调整以适合，但右侧有些空白。此外，这是实现此类布局的最佳实践吗？

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

Answer 1

我不知道如何用 Bootstrap 做到这一点。但正常的做法是这样的。

标题宽度为 100%；有三个div。左 div 宽度为 200px，向左浮动，右 div 宽度为 200px，向右浮动。两者都带有显示：块。中间的div带有display:inline-block; 页脚宽度为 100%；