面板包裝中的Bootstrap菜單

Question

我試圖在面板中放置一個引導菜單。當菜單位於面板之外時，菜單將正確顯示，所有菜單項都位於同一行上。將菜單放置在面板中時，菜單將進行換行。

產生的包木窗菜單中的代碼是在這裏：

#custom-bootstrap-menu.navbar-default .navbar-brand { 
 
    color: rgba(255, 255, 255, 1); 
 
} 
 
#custom-bootstrap-menu.navbar-default { 
 
    font-size: 14px; 
 
    background-color: rgba(58, 35, 3, 1); 
 
    border-width: 1px; 
 
    border-radius: 4px; 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a { 
 
    color: rgba(255, 255, 255, 1); 
 
    background-color: rgba(248, 248, 248, 0); 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover, 
 
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus { 
 
    color: rgba(51, 51, 51, 1); 
 
    background-color: rgba(128, 78, 7, 1); 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a, 
 
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover, 
 
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus { 
 
    color: rgba(197, 198, 166, 1); 
 
    background-color: rgba(231, 231, 231, 1); 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle { 
 
    border-color: #ddd; 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover, 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus { 
 
    background-color: #ddd; 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar { 
 
    background-color: #888; 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar, 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar { 
 
    background-color: #3a2303; 
 
}

<div class="container">  
 
    <div class="row"> 
 
     <div class="col-md-8 col-md-offset-2"> 
 
      <div class="panel panel-default" style="max-width:800px;margin-left:auto; margin-right:auto;"> 
 
       <div class="panel-body"> 
 
        <div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation"> 
 
         <div class="container-fluid"> 
 
          <div class="collapse navbar-collapse navbar-menubuilder"> 
 
           <ul class="nav navbar-nav"> 
 
            <li><a href="/">&nbsp;&nbsp;Home&nbsp;&nbsp;</a> 
 
            </li> 
 
            <li><a href="sdfsdf">Mission</a> 
 
            </li> 
 
            <li><a href="sdfsdf">Services</a> 
 
            </li> 
 
            <li><a href="sdfsf">Partners</a> 
 
            </li> 
 
            <li><a href="asdf">Education</a> 
 
            </li> 
 
            <li><a href="sfsdf">Contact Us</a> 
 
            </li> 
 
           </ul> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

​​

我也包括什麼樣的菜單看起來像內部和麪板外的圖片。

任何幫助，非常感謝。

謝謝 喬納森

Answer 1

編織：http://kodeweave.sourceforge.net/editor/#f43fb34db53995f4b4397c59708dedb5

容易修復;替換...

<div class="container-fluid"> 
    <ul class="nav navbar-nav" style="max-width:800px;margin-left:auto; margin-right:auto;"> 
    <div class="collapse navbar-collapse navbar-menubuilder"> 
     <li><a href="javascript:void(0)">Home</a> 
     <ul class="nav navbar-nav"> 

與...

<ul class="nav navbar-nav" style="max-width:800px;margin-left:auto; margin-right:auto;"> 

通知我感動從面板的樣式導航欄

<div class="panel panel-default" style="max-width:800px;margin-left:auto; margin-right:auto;"> 

搞掂你的HTML一點。

#custom-bootstrap-menu.navbar-default .navbar-brand { 
 
    color: rgba(255, 255, 255, 1); 
 
} 
 
#custom-bootstrap-menu.navbar-default { 
 
    font-size: 14px; 
 
    background-color: rgba(58, 35, 3, 1); 
 
    border-width: 1px; 
 
    border-radius: 4px; 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a { 
 
    color: rgba(255, 255, 255, 1); 
 
    background-color: rgba(248, 248, 248, 0); 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover, 
 
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus { 
 
    color: rgba(51, 51, 51, 1); 
 
    background-color: rgba(128, 78, 7, 1); 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a, 
 
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover, 
 
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus { 
 
    color: rgba(197, 198, 166, 1); 
 
    background-color: rgba(231, 231, 231, 1); 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle { 
 
    border-color: #ddd; 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover, 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus { 
 
    background-color: #ddd; 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar { 
 
    background-color: #888; 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar, 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar { 
 
    background-color: #3a2303; 
 
}

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-8 col-md-offset-2"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
      <div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation"> 
 
      <ul class="nav navbar-nav" style="max-width:800px;margin-left:auto; margin-right:auto;"> 
 
       <li><a href="javascript:void(0)">Home</a> 
 
       </li> 
 
       <li><a href="javascript:void(0)">Mission</a> 
 
       </li> 
 
       <li><a href="javascript:void(0)">Services</a> 
 
       </li> 
 
       <li><a href="javascript:void(0)">Partners</a> 
 
       </li> 
 
       <li><a href="javascript:void(0)">Education</a> 
 
       </li> 
 
       <li><a href="javascript:void(0)">Contact Us</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>