html - 使用 Bootstrap 导航栏固定左右宽度布局

Question

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

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

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

我们如何使用 twitter bootstrap 实现这种类型的布局导航栏。

Answer 1

您可以将左右 div 放在中心 div 中，然后您需要对左右 div 使用 float:left 和 float:right。

Live Demo

HTML:

<div class="row">
    <div class="col-lg-12 col-ms-12 col-sm-12 col-xs-12 centerBox">
        <div class="push-left leftBox">left</div>
        this is center
        <div class="push-right rightBox">right</div>
    </div>
</div>

CSS:

.centerBox {  height:50px; }
.rightBox{ width:100px; height:50px; float:right }
.leftBox{ width:100px; height:50px; float:left }