我试图找出如何使用Twitter bootstrap 3进行非常简单的布局。
它基本上是一个粘性标题(始终位于视口的顶部),一个位于内容底部的页脚(不固定到视口的底部),然后介于两个-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:这是我在这里找到的一个小提琴,并且已经适应了它,但右侧有一些空白。此外,这是实现此类布局的最佳实践吗?
我不知道如何用Bootstrap做到这一点。但正常的做法就是这样。
有一个宽度为100%的标题;有三个div。左边div宽度为200px,向左浮动,右边div宽度为200px,向右浮动。两者都有display:block。中间div显示:inline-block;有一个宽度为100%的页脚;
这是今天碰到主页的(真的)老问题。自2014年以来,OP没有访问该网站(登录)。如果有人仍在使用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>