我正在尝试使用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,但右侧有一些空白。此外,在实现此类型的布局时,是否这是最佳实践?