html - 为什么我的 Bootstrap 导航栏坏了

Question

我正在尝试创建一个如下所示的导航栏，左侧为 300px，右侧为 300px，中心宽度为 100%。我们如何使用 Bootstrap 导航栏实现这种布局。

+-------------------------------------------------------------------------------+
|               |    Center 100% fluid width                       |             
|  SITE LOGO    |------------------------------------------- ----- | Right      +
|               |                                                  |
+-------------------------------------------------------------------------------+

left fixed width —— middle fluid % —— right fixed width

下面是关于我试图实现上述布局的fiddle。 http://www.bootply.com/ddBMU6HjwE

为什么我的导航栏在这里中断了？

Answer 1

试试这个:

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 的高度和宽度，以及左侧 Logo .div(仅当 Logo 尺寸没有为您指定时)。

.rightBox{ height: 60px; width:260px;}
.leftBox { height: 60px; width:260px;}/* If logo img doesn't dictate this for you
.centerBox {}/* No custom CSS needed */