如何更改格側欄的高度

/* make sidebar nav vertical */ 
 
@media (min-width: 768px) { 
 
    .sidebar-nav .navbar .navbar-collapse { 
 
    
 
    padding: 0; 
 
    max-height: none; 
 
    } 
 
    .sidebar-nav .navbar ul { 
 
    float: none; 
 
    display: block; 
 
    } 
 
    .sidebar-nav .navbar li { 
 
    float: none; 
 
    display: block; 
 
    } 
 
    .sidebar-nav .navbar li a { 
 
    padding-top: 12px; 
 
    padding-bottom: 12px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8" /> 
 
    <link rel="stylesheet" href="Content/AdminLTE.css" /> 
 
    <link rel="stylesheet" href="Content/bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="Content/sidebar.css" /> 
 
    
 
    
 
</head> 
 
<body> 
 
    <header> 
 
    <nav class="navbar navbar-inverse navbar-static-top"> 
 
     <div class="navbar-header"> 
 
      <a class="navbar-brand" href="#">Star International</a> 
 
     </div> 
 
     <ul class="navbar-nav nav" > 
 
      <li class="active"><a href="#">Home</a></li> 
 
     </ul> 
 
    </nav> 
 
     </header> 
 

 
    <div> 
 
     <div class="row"> 
 
      <div class="col-sm-2"> 
 
       <div class="sidebar-nav"> 
 
        <div class="navbar navbar-default" role="navigation"> 
 
         <div class="navbar-header"> 
 
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> 
 
           <span class="sr-only">Toggle navigation</span> 
 
           <span class="icon-bar"></span> 
 
           <span class="icon-bar"></span> 
 
           <span class="icon-bar"></span> 
 
          </button> 
 
          <span class="visible-xs navbar-brand">Sidebar menu</span> 
 
         </div> 
 
         <div class="navbar-collapse collapse sidebar-navbar-collapse"> 
 
          <ul class="nav navbar-nav"> 
 
           <li class="active"><a href="#">Menu Item 1</a></li> 
 
           <li><a href="#">Menu Item 2</a></li> 
 
           <li><a href="#">Menu Item 3</a></li> 
 
           <li><a href="#">Menu Item 4</a></li> 
 
           <li><a href="#">Reviews <span class="badge">1,118</span></a></li> 
 
          </ul> 
 
         </div><!--/.nav-collapse --> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-9"> 
 
       Main content goes here 
 
      </div> 
 
     </div> 
 
    </div> 
 
    
 

 

 
    
 
    
 

 
</body> 
 
</html>

輸出圖像：

OutPut Image

正如你可以看到有頂部導航欄和sidebar.how我可以刪除之間的空間那個空間。我也想讓邊欄菜單高度達到100％我試圖把div標籤，但沒有工作。請檢查screeshot的輸出圖像。

來源

2016-09-26 Vtol Gunner

的空間是一個'保證金bottom'在'.navbar' – blonfu

.sidebar-nav .navbar li a { 
    padding-top: 12px; 
    padding-bottom: 12px; 
}

這段代碼適用於所有a元素列表，而不是嘗試這樣做：

.sidebar-nav .navbar li a:not(:first-child) { 
    padding-top: 12px; 
    padding-bottom: 12px; 
}

來源

2016-09-26 12:48:53 Grey

如何更改格側欄的高度

回答

相關問題