ブートストラップ - CSS - 現在のナビゲーションが表示されているコンテナ

Question

わずかな問題があります。私は右上にナビゲーションがあるレイアウトを作ろうとしています。そして、その下のコンテナの中にコンテンツを持ってください。

コンテンツを持つコンテナがナビゲーションバー内に表示されるという問題があります。私はこれでどこが間違っているのか分かりません。コード：

<nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li class="misc"><a href="../navbar/">About</a></li> 
      <li class="misc"><a href="../navbar/">Servo</a></li> 
      <li class="misc"><a href="../navbar/">Spindle</a></li> 
      <li class="misc"><a href="../navbar/">Contact Us</a></li> 
      <li class="misc small"><a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true" style="font-size:20px;"></span></a></li> 
      <li class="misc small"></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav> 


    <div class="container-fluid"> 
    CONTENT 
    </div> 

そして、JSのフィドル：

https://jsfiddle.net/DTcHh/

あなたが見ることができるように、私はそれが実際のナビゲーションバーの内側に表示されている要素を検査した場合、私は、コンテンツを見ることはできません。私はどこでこれに間違っていますか？

Answer 1

navbar-collapseの後にクラスcollapseが追加されたためです。クラスを削除すると、ナビゲートが表示されます。

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="navbar navbar-default"> 
 
     <div class="navbar-header"> 
 
      <a class="navbar-brand" href="#">Bootstrap 3</a> 
 
     </div> 
 
     <div class="navbar-collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="dropdown active"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="http://getbootstrap.com/getting-started/#download">Download Bootstrap</a></li> 
 
         <li class="divider"></li> 
 
         <li class="dropdown-header">Examples</li> 
 
         <li><a href="http://getbootstrap.com/getting-started/#template">Basic template</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/starter-template/">Starter template</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/grid/">Grids</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/jumbotron/">Jumbotron</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/navbar/">Navbar</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/signin/">Sign-in page</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/sticky-footer/">Sticky footer</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/offcanvas/">Offcanvas</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/carousel/">Carousel</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/theme/">Theme</a></li>       
 
         <li class="divider"></li> 
 
         <li class="dropdown-header">Compatibility</li> 
 
         <li><a href="http://getbootstrap.com/getting-started/#migration">Migrating from 2.x to 3.0</a></li> 
 
         <li><a href="http://getbootstrap.com/getting-started/#browsers">Browser support</a></li> 
 
         <li><a href="http://getbootstrap.com/getting-started/#third-parties">Third party support</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="http://getbootstrap.com/css">CSS</a></li> 
 
       <li><a href="http://getbootstrap.com/components">Components</a></li> 
 
       <li><a href="http://getbootstrap.com/javascript">JavaScript</a></li> 
 
      </ul> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li class="active"><a href="http://getbootstrap.com/customize">Customize</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="jumbotron"> 
 
     <h1>Twitter Bootstrap 3.0</h1> 
 
     <p class="lead">Starter template with CSS and JS included.</p> 
 
     <p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p> 
 
     </div> 
 
</div>