Wie verschiebe ich sidebar-wrapper unter horizontaler bar

Question

Hallo Ich gebe einen Versuch als neu bin neu zu HTML und CSS können Sie vorschlagen, wie kann ich Seite Wrapper unter einer horizontalen Navigationsleiste bewegen und die Navigationsleiste sollte in Seite passen Breite. in horizontaler Navigationsleiste habe ich Text genannt nach Hause und Abmelde kann euch rechtes Ende Seite bewegen und macht es als Startseite Symbol und Abmeldesymbol

Fiddle: https://jsfiddle.net/xzm7bx4n/

$("#menu-toggle").click(function(e) { 
 
     e.preventDefault(); 
 
     $("#wrapper").toggleClass("active"); 
 
});

.row{ 
 
    margin-left:0px; 
 
    margin-right:0px; 
 
} 
 

 
#wrapper { 
 
    padding-left: 70px; 
 
    transition: all .4s ease 0s; 
 
    height: 100% 
 
} 
 

 
#sidebar-wrapper { 
 
    margin-left: -150px; 
 
    left: 70px; 
 
    width: 200px; \t 
 
    background: #222; 
 
    position: fixed; 
 
    height: 60%; 
 
    z-index: 10000; 
 
    transition: all .4s ease 0s; 
 
\t float:top; 
 
} 
 

 
.sidebar-nav { 
 
    display: block; 
 
    float: left; 
 
    width: 200px; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#page-content-wrapper { 
 
    padding-left: 0; 
 
    margin-left: 0; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
#wrapper.active { 
 
    padding-left: 150px; 
 
} 
 
#wrapper.active #sidebar-wrapper { 
 
    left: 150px; 
 
} 
 

 
#page-content-wrapper { 
 
    width: 100%; 
 
} 
 

 
#sidebar_menu li a, .sidebar-nav li a { 
 
    color: #999; 
 
    display: block; 
 
    float: left; 
 
    text-decoration: none; 
 
    width: 200px; 
 
    background: #252525; 
 
    border-top: 1px solid #373737; 
 
    border-bottom: 1px solid #1A1A1A; 
 
    -webkit-transition: background .5s; 
 
    -moz-transition: background .5s; 
 
    -o-transition: background .5s; 
 
    -ms-transition: background .5s; 
 
    transition: background .5s; 
 
} 
 
.sidebar_name { 
 
    padding-top: 25px; 
 
    color: #fff; 
 
    opacity: .7; 
 
} 
 

 
.sidebar-nav li { 
 
    line-height: 40px; 
 
    text-indent: 20px; 
 
} 
 

 
.sidebar-nav li a { 
 
    color: #999999; 
 
    display: block; 
 
    text-decoration: none; 
 
} 
 

 
.sidebar-nav li a:hover { 
 
    color: #fff; 
 
    background: rgba(255,255,255,0.2); 
 
    text-decoration: none; 
 
} 
 

 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 

 
.sidebar-nav > .sidebar-brand { 
 
    height: 65px; 
 
    line-height: 60px; 
 
    font-size: 18px; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a { 
 
    color: #999999; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a:hover { 
 
    color: #fff; 
 
    background: none; 
 
} 
 

 
#main_icon 
 
{ 
 
    float:right; 
 
    padding-right: 65px; 
 
    padding-top:20px; 
 
} 
 
.sub_icon 
 
{ 
 
    float:right; 
 
    padding-right: 65px; 
 
    padding-top:10px; 
 
} 
 
.content-header { 
 
    height: 65px; 
 
    line-height: 65px; 
 
} 
 

 
.content-header h1 { 
 
    margin: 0; 
 
    margin-left: 20px; 
 
    line-height: 65px; 
 
    display: inline-block; 
 
} 
 

 
@media (max-width:767px) { 
 
#wrapper { 
 
    padding-left: 70px; 
 
    transition: all .4s ease 0s; 
 
} 
 
#sidebar-wrapper { 
 
    left: 70px; 
 
} 
 
#wrapper.active { 
 
    padding-left: 150px; 
 
} 
 
#wrapper.active #sidebar-wrapper { 
 
    left: 150px; 
 
    width: 150px; 
 
    transition: all .4s ease 0s; 
 
} 
 
}

<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.js"></script> 
 
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.min.js"></script> 
 
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script> 
 
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.css" rel="stylesheet"/> 
 
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="wrapper" class="active"> 
 
    <!-- Sidebar --> 
 
      <!-- Sidebar --> 
 
    <div id="sidebar-wrapper">  
 
     <ul class="sidebar-nav" id="sidebar"> 
 
      <li><a>New Project</a></li>   
 
      <li><a>Projects</a></li> 
 
      <li><a>Pyramid Oppurtinities</a></li> 
 
     </ul> 
 
     </div> 
 
      
 
     <!-- Page content --> 
 
     <div id="page-content-wrapper"> 
 
     <!-- Keep all page content within the page-content inset div! --> 
 
     <div class="page-content inset"> 
 
      <div class="row"> 
 
       <div class="col-md-14"> 
 
       <p class="well lead">SANRIA Home Logout</p> 
 
\t \t \t 
 
\t \t \t 
 
       <div class="container"> 
 
       <div class="row"> <!-- div da esquerda --> 
 
        <!-- Text input CNPJ e Razao Social--> 
 

 
       </div> <!-- fim div da esquerda --> 
 
      </div> 
 
      <!-- <p class="well lead">An Experiment using the sidebar (<a href="http://animeshmanglik.name">animeshmanglik.name</a>)</p> --> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 1

Ich bin Ich bin froh, dass du diese Frage gestellt hast. Wenn Sie einen Header haben, der das erste im DOM sein sollte, möchten Sie dies oder als erstes Element in den Wrapper einfügen. Das Seitenleistenelement kann darunter platziert werden, um ein schlankes Aussehen zu erzielen. Wenn Sie einen anderen Stil wollten, können wir das auch diskutieren. Dies ist der Code, mit dem ich endete.

<div id="wrapper" class="active"> 
    <!-- Sidebar --> 
      <!-- Sidebar --> 

     <!-- Page content --> 
     <div id="page-content-wrapper"> 
     <!-- Keep all page content within the page-content inset div! --> 
     <div class="page-content inset"> 
      <div class="row"> 
      <div class="col-md-14"> 
      <p class="well lead">SANRIA Home Logout</p> 


      <div class="container"> 
       <div class="row"> <!-- div da esquerda --> 
        <!-- Text input CNPJ e Razao Social--> 

       </div> <!-- fim div da esquerda --> 
      </div> 
      <!-- <p class="well lead">An Experiment using the sidebar (<a href="http://animeshmanglik.name">animeshmanglik.name</a>)</p> --> 
      </div> 
      </div> 

      <div id="sidebar-wrapper">  
      <ul class="sidebar-nav" id="sidebar"> 
       <li><a>New Project</a></li>   
       <li><a>Projects</a></li> 
       <li><a>Pyramid Oppurtinities</a></li> 
      </ul> 
      </div> 

     </div> 
    </div> 

Hier ist CSS.

.row{ 
    margin-left:0px; 
    margin-right:0px; 
} 

#wrapper { 
    /*padding-left: 70px;*/ 
    transition: all .4s ease 0s; 
    height: 100% 
} 

#sidebar-wrapper { 
    margin-left: -150px; 
    left: 70px; 
    width: 200px; 
    background: #222; 
    position: fixed; 
    height: 60%; 
    z-index: 10000; 
    transition: all .4s ease 0s; 
    /*float:top;*/ 
} 

.sidebar-nav { 
    display: block; 
    float: left; 
    width: 200px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#page-content-wrapper { 
    padding-left: 0; 
    margin-left: 0; 
    width: 100%; 
    height: auto; 
} 
#wrapper.active { 
    /*padding-left: 150px;*/ 
} 
#wrapper.active #sidebar-wrapper { 
    left: 150px; 
} 

#page-content-wrapper { 
    width: 100%; 
} 

#sidebar_menu li a, .sidebar-nav li a { 
    color: #999; 
    display: block; 
    float: left; 
    text-decoration: none; 
    width: 200px; 
    background: #252525; 
    border-top: 1px solid #373737; 
    border-bottom: 1px solid #1A1A1A; 
    -webkit-transition: background .5s; 
    -moz-transition: background .5s; 
    -o-transition: background .5s; 
    -ms-transition: background .5s; 
    transition: background .5s; 
} 
.sidebar_name { 
    padding-top: 25px; 
    color: #fff; 
    opacity: .7; 
} 

.sidebar-nav li { 
    line-height: 40px; 
    text-indent: 20px; 
} 

.sidebar-nav li a { 
    color: #999999; 
    display: block; 
    text-decoration: none; 
} 

.sidebar-nav li a:hover { 
    color: #fff; 
    background: rgba(255,255,255,0.2); 
    text-decoration: none; 
} 

.sidebar-nav li a:active, 
.sidebar-nav li a:focus { 
    text-decoration: none; 
} 

.sidebar-nav > .sidebar-brand { 
    height: 65px; 
    line-height: 60px; 
    font-size: 18px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #999999; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #fff; 
    background: none; 
} 

#main_icon 
{ 
    float:right; 
    padding-right: 65px; 
    padding-top:20px; 
} 
.sub_icon 
{ 
    float:right; 
    padding-right: 65px; 
    padding-top:10px; 
} 
.content-header { 
    height: 65px; 
    line-height: 65px; 
} 

.content-header h1 { 
    margin: 0; 
    margin-left: 20px; 
    line-height: 65px; 
    display: inline-block; 
} 

@media (max-width:767px) { 
#wrapper { 
    /*padding-left: 70px;*/ 
    transition: all .4s ease 0s; 
} 
#sidebar-wrapper { 
    left: 70px; 
} 
#wrapper.active { 
    /*padding-left: 150px;*/ 
} 
#wrapper.active #sidebar-wrapper { 
    left: 150px; 
    width: 150px; 
    transition: all .4s ease 0s; 
} 
} 

.well{ 
    margin-bottom: 0px; 
} 
.lead{ 
    margin-bottom: 0px; 
} 
p{ 
    margin: 0px; 
} 

Arbeits JSFiddle: https://jsfiddle.net/eq6bhyg5/

Anmerkungen: Ich habe alle unnötigen Polsterung aus, die die Sicht Abwerfen schien. Wir sollten wirklich den Raum benutzen, den wir bekommen. Wenn Sie möchten, dass die Seitenleiste in der Seite mit der Seite einschließlich der Kopfzeile daneben liegt. Aktion: Entfernen Sie die Seitenleiste aus dem Seiteninhalt-Wrapper. add display:inline-block; width:20% zu Seitenleiste CSS. Dann stellen Sie den Wrapper CSS width: 80%; display: inline-block;