如何移動sidebar包裝下單槓

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。然後設置包裝css爲width: 80%; display: inline-block;