面板包装中的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>