我正在尝试创建一个导航栏,如下所示,该导航栏300px
在左侧和300px
右侧具有中心100%
宽度。我们如何使用引导导航栏实现此布局。
+-------------------------------------------------------------------------------+
| | Center 100% fluid width |
| SITE LOGO |------------------------------------------- ----- | Right +
| | |
+-------------------------------------------------------------------------------+
left fixed width —— middle fluid % —— right fixed width
以下是fiddle
我试图实现上述布局的内容。http://www.bootply.com/ddBMU6HjwE
为什么我的导航栏在这里中断?
试试这个:
http://www.bootply.com/9joMGFoxCU
...
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="leftBox pull-left">Logo on Left</div>
<div class="rightBox pull-right">Right Div</div>
<div class="centerBox text-center">Center Stuff</div>
仅需要很少的自定义CSS-仅当徽标的大小对您没有要求时,仅右.div的高度和宽度以及左徽标.div的高度和宽度即可。
.rightBox{ height: 60px; width:260px;}
.leftBox { height: 60px; width:260px;}/* If logo img doesn't dictate this for you
.centerBox {}/* No custom CSS needed */
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句