Wie Bootstrap Sidebar und Navbar in einer Zeile hinzufügen?

Question

Ich habe Beispielcode der Sidebar und Navbar mit Bootstrap.

Ich weiß nicht, wie Sie eine sidebar gleiche Zeile in der navbar hinzufügen.

So:

sidebar  logo navbar {item 1, item 2, item 3} 

Das

Mein Stift bei http://codepen.io/r0ysy0301/pen/MbYzpE

bedeuten Es nur Navigationsleiste zeigt und zeigen keine knopfartige Umschaltknopf die Seitenleiste zu öffnen.

Answer 1

Überprüfen Sie dieses einfache Bootstrap mit Sidebar-Implementierung here.

<div class="navbar navbar-fixed-top navbar-default" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand text-center" href="#">Project name</a> 
     </div> 
     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="#">Item 1</a></li> 
       <li><a href="#about">Item 2</a></li> 
       <li><a href="#contact">Item 3</a></li> 
      </ul> 
     </div> 
     <!-- /.nav-collapse --> 
    </div> 
    <!-- /.container --> 
</div> 
<!-- /.navbar --> 

<div class="container-fluid"> 
    <div class="row row-offcanvas row-offcanvas-left"> 
     <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="custom-sidebar" role="navigation"> 
      <div class="sidebar-nav"> 
       <ul class="nav"> 

        <li class="active"><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li class="nav-divider"></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
       </ul> 
      </div> 
      <!--/.well --> 
     </div> 
     <!--/span--> 

     <div class="col-xs-12 col-sm-9"> 
      <br> 
      <div class="jumbotron"> 
      <a href="#" class="visible-xs" data-toggle="offcanvas"><i class="fa fa-lg fa-reorder"></i></a> 
      <h1>Hello, world!</h1> 
      <p>dajsdnaksjndkajsndkjas</p> 
      </div> 
      <div class="row"> 
       <div class="col-6 col-sm-6 col-lg-4"> 
        <h2>Section</h2> 
        <p>asdkasdkmaskdmaskdmkasmdkwuidnjdnajdjkansdjkasndjkasndkajsndkajsndkajsndkjasd</p> 
        <p><a class="btn btn-default" href="#">View details »</a></p> 
       </div> 
       <!--/span--> 
       <div class="col-6 col-sm-6 col-lg-4"> 
        <h2>Heading</h2> 
        <p>Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript. Bootstrap is a front-end framework that uses CSS and JavaScript to 
         facilitate responsive Web design. </p> 
        <p><a class="btn btn-default" href="#">View details »</a></p> 
       </div> 
       <!--/span--> 

       <div class="col-6 col-sm-6 col-lg-4"> 
        <h2>Heading</h2> 
        <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap 
         friendly HTML, CSS and Javascript.</p> 
        <p><a class="btn btn-default" href="#">View details »</a></p> 
       </div> 
       <!--/span--> 
       <div class="col-6 col-sm-6 col-lg-4"> 
        <h2>Heading</h2> 
        <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap 
         friendly HTML, CSS and Javascript.</p> 
        <p><a class="btn btn-default" href="#">View details »</a></p> 
       </div> 
       <!--/span--> 
      </div> 
      <!--/row--> 
     </div> 
     <!--/span--> 


    </div> 
    <!--/row--> 

    <hr> 

    <footer> 
     <p>© Footer here</p> 
    </footer> 

</div> 
<!--/.container--> 

CSS:

body { 
    padding-top: 50px; 
} 
footer { 
    padding-left: 15px; 
    padding-right: 15px; 
} 

/* 
* Off Canvas 
* -------------------------------------------------- 
*/ 
@media screen and (max-width: 768px) { 
    .row-offcanvas { 
    position: relative; 
    -webkit-transition: all 0.25s ease-out; 
    -moz-transition: all 0.25s ease-out; 
    transition: all 0.25s ease-out; 
    background:#ecf0f1; 
    } 

    .row-offcanvas-left 
    .sidebar-offcanvas { 
    left: -40%; 
    } 

    .row-offcanvas-left.active { 
    left: 40%; 
    } 

    .sidebar-offcanvas { 
    position: absolute; 
    top: 0; 
    width: 40%; 
    margin-left: 12px; 
    } 
} 

#custom-sidebar { 
    padding:15px; 
    z-index: 1000; 
    margin-top: -56px; 
    background: #fff; 
} 

.navbar-brand { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 0; 
    text-align: center; 
    margin: auto; 
} 
.navbar-toggle { 
    z-index:3; 
} 

.navbar { 
    z-index: 200; 
} 

Script:

$(function(){ 
    $('[data-toggle=offcanvas]').click(function() { 
    $('.row-offcanvas').toggleClass('active'); 
    }); 
});