v4引导程序全高侧边栏 [英] v4 bootstrap full height sidebar

问题描述

我使用的是最新版本的引导程序，并且我的侧边栏太短且没有全高.
您可以从此处查看它: http://srv.sniperjum.com/sh1omi/bootstrap-dev/
CSS: http://srv.sniperjum.com/sh1omi/bootstrap-dev/css/style.css
这个问题是我的CSS产生的，还是引导程序产生的问题?以及我该如何解决?

I using the latest version of bootstrap and my siderbar is too short and not full height.
You can view it from here: http://srv.sniperjum.com/sh1omi/bootstrap-dev/
CSS: http://srv.sniperjum.com/sh1omi/bootstrap-dev/css/style.css
This problem is from my CSS or is it a problem from the bootstrap? and how can I fix it?

CSS

li.active{
    background-color: #428bca;
}
li {
    padding-bottom: 5px;
    padding-top: 5px;
}
.sidebar{
    background-color: #f5f5f5;
    padding-right: 20px;
    padding-top: 20px;
}

/* Sidebar navigation */
.nav-sidebar {
    margin-right: -21px; /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
}
.nav-sidebar > li > a {
    padding-right: 20px;
    padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
    color: #fff;
    background-color: #428bca;
}
button{
    color: #fafafa
}

HTML

<nav class="navbar navbar-dark navbar-full bg-inverse">
    <button type="button" class="navbar-toggler" onclick="ToogleNavbar()">&#9776;</button>
</nav>
<div class="container-fluid">
    <div class="row" >
        <div class="col-sm-3 col-md-2 sidebar" id="Navbar">
            <ul class="nav nav-sidebar">
                <li class='active'><a href="/">Home</a></li>
                <li><a href="../notes">Notes</a></li>
                <li><a href="../chat">Chat</a></li>
                <li><a href="../rss">RSS</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">\</div>
    </div>
</div>

推荐答案

自从提出此问题以来，Bootstrap 4发生了变化，但是您可以使用min-height使侧边栏全高..

Bootstrap 4 has changed since this question was asked, but you can make the sidebar full height using min-height..

.sidebar{
    background-color: #f5f5f5;
    padding-right: 20px;
    padding-top: 20px;
    min-height: calc(100vh - 50px);
}

http://www.codeply.com/go/oiByWVrIbe ( Bootstrap 4 Alpha 6 )

更新Bootstrap 4.1

Flexbox可用于允许容器及其子div(行，列和侧边栏)填充高度...

Flexbox can be used to allow the container and its child divs (row, col and sidebar) to fill height...

https://www.codeply.com/go/fz2R7nUwue

相关:创建响应式navbar边栏抽屉"在Bootstrap 4中?​​

这篇关于v4引导程序全高侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！