水平バーの下にサイドバーラッパーを移動するにはどうすればいいですか？

Question

こんにちは、私はhtmlとcssに新しいものを試しています。あなたは、横のナビゲーションバーの下にサイドラッパーを移動し、幅。私は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

：水平ナビゲーションバーに私は家と呼ばれるテキストやログアウトは君たち右端側に移動し、ホームページのアイコンとログアウトアイコンとして

フィドルそれを作ることができる持っていますあなたはこの質問をしてうれしいです。 DOMの中で最初にすべきヘッダーがあるときは、これを置くか、ラッパーの中の最初の項目として挿入します。サイドバー要素は、その下に配置して滑らかな外観にすることができます。 異なるスタイルが必要だった場合は、それについても議論できます。 これは私が終了したコードです。ここで

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

は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; 
} 

ワーキングJSFiddle：https://jsfiddle.net/eq6bhyg5/

注：私は、ビューを投げているように見えた、不要なパディングのすべてを取り出しました。 私たちは与えられたスペースを本当に使うべきです。 サイドバーを横にしたい場合は、横にヘッダーを含むページを隣接させます。 処置：サイド・バーをページ・コンテンツ・ラッパーの外に戻してください。 display:inline-block; width:20%をサイドバーCSSに追加します。 `

home logout

は`次にCSSに適用されます： `.outer_div_class {テキスト整列：右}`で次に width: 80%; display: inline-block;