為什么我的引導導航欄損壞

Question

我想創建一個導航欄像下面其中有300px的左側300px與中心右側100%的寬度。 我們如何使用引導導航欄實現此布局。

+-------------------------------------------------------------------------------+
|               |    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的圖像將占據手機和1080p顯示器的頁面寬度的1/6以上。

編輯：有一個工作的版本： http : //www.bootply.com/HVEW1iIWIB

Answer 3

使用它，如果要固定with的寬度，請在CSS中使用position和width：

完整代碼和演示，請訪問： 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>