使用引导程序导航栏修复了左右宽度布局

Question

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

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

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

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

Answer 1

您可以将左右div放在中间div中，之后您需要使用float:left和float:right作为左右div。

<强> 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 }

Answer 2

您可以尝试应用this逻辑

HTML

<div class="left">Left</div>
<div class="right">Right</div>
<div class="mid">Mid</div>

CSS

*{margin: 0}
.left, .right {
  width: 300px;
  background: red
}
.left {
  float: left
}
.right {
  float: right
}
.mid {
  margin: 0 300px;
  background: yellow
}