使用bootstrap导航栏固定左右宽度布局

我们如何创建一个像左侧的300px和右侧的300px宽度为100%宽度的导航栏。我们如何使用bootstrap导航栏来实现这种布局。使用bootstrap导航栏固定左右宽度布局

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

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

我们如何使用twitter引导来实现这种类型的布局navbar。

来源

2014-07-12 theJava

你可以把左和右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 }

来源

2014-07-12 18:33:59

感谢Saimak，你可以让我知道如何将我这个栅间与引导导航栏。 – theJava

@theJava你可以看看这个例子：[Navbar]（http://www.bootply.com/sp34sOQ9qO） –

再次感谢，但我希望你的代码与Navbar整合，我面临一些困难。 – theJava

你可以尝试申请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 
}

来源

2014-07-12 18:44:10 Tushar

使用bootstrap导航栏固定左右宽度布局

回答

相关问题