使用引导导航栏固定左右宽度布局答案

【问题标题】：Fixed left and right width layout using bootstrap navbar使用引导导航栏固定左右宽度布局
【发布时间】：2014-07-12 18:24:10
【问题描述】：

我们如何创建如下所示的导航栏，左侧有300px，右侧有300px，中间有100% 宽度。我们如何使用引导导航栏实现这种布局。

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

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

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

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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 }

【讨论】：

谢谢 Saimak，你能告诉我如何将它与引导导航栏集成。
@theJava 你可以看看这个例子：Navbar
再次感谢，但我希望您的代码与导航栏集成在一起，但我遇到了一些困难。
谢谢，我怎样才能确保我的中心部分在这里是 100% 流动的。我在这里对您的代码进行了更改。 bootply.com/TBY5Kc1Dt6
bootply.com/TBY5Kc1Dt6 我的中心是 100% 流体宽度吗？

【解决方案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
}

【讨论】：