Question

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

正如您所看到的，顶部导航栏和侧栏之间有空格。我可以删除该空间。另外我想让侧边栏菜单高度达到100％我试图放入div标签但是没有用。请检查输出图像是否为screeshot。

Answer 1

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

如何更改div侧栏的高度

1 个答案: