Question

我正在尝试创建一个类似于下方的导航栏，其左侧为300px，右侧为300px，宽度为中心100%。我们如何使用bootstrap navbar实现此布局。

+-------------------------------------------------------------------------------+
|               |    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的高度和宽度，以及左侧徽标.div，只有当徽标大小没有为您指定时。

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

Answer 2

一个人，你有 <div class="col-lg-12 col-ms-12 col-sm-12 col-xs-12 centerBox">
在所有情况下将div显示为屏幕宽度的100％，强制您的徽标和右侧栏显示在其上方和下方。这些专栏的想法是使用动态方法根据所查看的设备调整网页大小;您可能希望将中间内容设置为col-lg-8，将徽标和右侧栏设置为col-lg-2。

您可能需要为其他尺寸调整此数字，因为300px图像占据手机页面宽度的1/6以上，然后是1080p显示器。

编辑：有一个版本正常运行：http://www.bootply.com/HVEW1iIWIB

Answer 3

使用此选项，如果要修复宽度，请使用css中的位置和宽度：

完整代码和演示：http://www.bootply.com/cghQAenUTC

CSS：

/* CSS used here will be applied after bootstrap.css */
.rightBox{ float:right; height: 60px; border:1px dashed red; }
.leftBox { float:left; height: 60px;border:1px dashed red; }
.centerBox {height:60px; border:1px dashed red;}

HTML：

<div class="navbar navbar-default" role="navigation">
  <div class="container-fluid">    
   <div class="row">
     <div class="col-md-2 leftBox">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Logo</a>
    </div>
     </div>
   <div class="col-md-8 centerBox">hi</div>
     <div class="col-md-2 rightBox">right Div</div>
  </div>
  </div>
</div>

为什么我的bootstrap导航栏坏了

3 个答案: