パネルラップのブートストラップメニュー

Question

パネル内にブートストラップメニューを配置しようとしています。メニューがパネルの外側にある場合、メニューはすべてのメニュー項目が1行に正しく表示されます。メニューをパネル内に配置すると、メニューがラップされます。

wrapingメニューを生成するコードはここにある：

#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

簡単に修正を。私はナビゲーションバーあなたのHTMLビットまでの固定

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

にあなたのパネルからスタイルを移動...

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

お知らせして...

<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"> 

を交換してください。

#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>