![全高侧边栏 全高侧边栏]()
本文介绍了v4 bootstrap 全高侧边栏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用的是最新版本的引导程序,我的侧边栏太短而且不是全高.
您可以从这里查看:http://srv.sniperjum.com/sh1omi/bootstrap-dev/
CSS:http://srv.sniperjum.com/sh1omi/bootstrap-dev/css/style.css
这个问题是来自我的 CSS 还是来自引导程序的问题?我该如何解决?
CSS
li.active{背景颜色:#428bca;}李{填充底部:5px;填充顶部:5px;}.侧边栏{背景色:#f5f5f5;padding-right: 20px;填充顶部:20px;}/* 侧边栏导航 */.nav-边栏{右边距:-21px;/* 20px 填充 + 1px 边框 */底边距:20px;左边距:-20px;}.nav-侧边栏 >立>一个 {padding-right: 20px;左边距:20px;}.nav-侧边栏 >.active >一个,.nav-侧边栏 >.active >答:悬停,.nav-侧边栏 >.active >一个:焦点{颜色:#fff;背景颜色:#428bca;}按钮{颜色:#fafafa}
HTML
<button type="button" class="navbar-toggler" onclick="ToogleNavbar()">☰</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="/">首页</a></li><li><a href="../notes">Notes</a></li><li><a href="../chat">聊天</a></li><li><a href="../rss">RSS</a></li>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2"></div>
解决方案
Bootstrap 4 自提出此问题以来发生了变化,但您可以使用 min-height
.. 使侧边栏全高.>
.sidebar{背景色:#f5f5f5;padding-right: 20px;填充顶部:20px;最小高度:计算(100vh - 50px);}
http://codeply.com/go/oiByWVrIbe(Bootstrap 4 alpha 6)
更新 Bootstrap 4.1
Flexbox 可用于允许容器及其子 div(行、列和侧边栏)填充高度...
https://codeply.com/go/fz2R7nUwue
相关:创建响应式导航栏侧边栏抽屉"在 Bootstrap 4 中?
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()">☰</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 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://codeply.com/go/oiByWVrIbe (Bootstrap 4 alpha 6)
Update Bootstrap 4.1
Flexbox can be used to allow the container and its child divs (row, col and sidebar) to fill height...
https://codeply.com/go/fz2R7nUwue
Related: Create a responsive navbar sidebar "drawer" in Bootstrap 4?
这篇关于v4 bootstrap 全高侧边栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!