[英]Bootstrap 4 navbar with fixed-top: text overflows
Sorry, probably a noobie question. 抱歉,可能是一个noobie问题。 I'm trying to have a side navigation bar using bootstrap 4, which will be fixed (ie when I scroll the page it remains in the same location).
我试图使用使用引导程序4的侧面导航栏,该引导栏将得到修复(即,当我滚动页面时,它保持在同一位置)。 Adding the 'fixed-top' class does do it, but the text in my navbar overflows and goes outside of the navbar, looking very ugly:
添加'fixed-top'类可以做到这一点,但是我的导航栏中的文本溢出并超出了导航栏,看起来非常难看:
Without 'fixed-top', it looks fine (though of course doesn't do what I want it to): 没有“固定顶部”,它看起来很好(尽管当然不能满足我的期望):
What am I doing wrong? 我究竟做错了什么?
Please see the very minimal example on jsfiddle , or code here: 请在jsfiddle上查看非常简单的示例,或在此处编写代码:
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 p-0 bg-dark">
<nav class="navbar navbar-dark px-0 fixed-top"> <!--remove fixed-top and it's fine-->
<ul class="nav flex-column navbar-nav">
<li class="nav-item"><a href="index.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="hello.html" class="nav-link">Hello</a></li>
<li class="nav-item"><a href="howdy.html" class="nav-link">Longword and longword</a></li>
</ul>
</nav>
</div>
<div class="col-10 bg-primary">
blalbllala
blalbllala
blalbllala
blalbllala
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
blalbllala
blalbllala
blalbllala
blalbllala
blalbllala <br>
</div>
</div>
</div>
Thanks! 谢谢!
fixed-top
, as the name suggests, is not for "left" navbars, but for "top" navbars. 顾名思义,
fixed-top
不适用于“左”导航栏,而适用于“顶部”导航栏。
What you want to achieve is not achievable by adding classes to your navbar. 通过将类添加到导航栏无法实现您想要实现的目标。 You need to apply:
您需要申请:
position: fixed;
top: 0;
min-height: 100vh;
to the column and also to offset the content column by the width of your sidebar, as a position:fixed
element is taken out of the document flow so if you don't offset the rest, they will overlap. 到列,并通过侧边栏的宽度偏移内容列,因为
position:fixed
元素将从文档流中移出,因此,如果不偏移其余部分,它们将重叠。
Here it is: 这里是:
.row { background: #f8f9fa; } @media (min-width: 575px) { #sidebar { position: fixed; min-height: 100vh; top: 0; } }
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-sm-2 bg-dark" id="sidebar"> <nav class="navbar navbar-dark px-0"> <!--remove fixed-top and it's fine--> <ul class="nav flex-column navbar-nav"> <li class="nav-item"><a href="index.html" class="nav-link">Home</a></li> <li class="nav-item"><a href="hello.html" class="nav-link">Hello</a></li> <li class="nav-item"><a href="howdy.html" class="nav-link">Longword and longword</a></li> </ul> </nav> </div> <div class="col-12 col-sm-10 bg-primary offset-0 offset-sm-2"> blalbllala blalbllala blalbllala blalbllala <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> blalbllala blalbllala blalbllala blalbllala blalbllala <br> </div> </div> </div>
Note the offset-0 offset-sm-2
classes on the content column. 请注意content列上的
offset-0 offset-sm-2
类。 I also removed p-0
from the sidebar. 我还从侧边栏中删除了
p-0
。 It made no sense in current context. 在当前情况下这没有任何意义。
Another note is that having a sidebar of variable width is generally regarded as bad UI. 另一个注意事项是,通常将具有可变宽度的侧边栏视为不良UI。 Most popular UI frameworks and themes feature a fixed width sidebar (in between
210
and 290px
for normal sidebars and a 45
to 95px
width for no-text sidebars). 大多数流行的UI框架和主题都具有固定宽度的侧边栏(普通侧边栏的宽度在
210
至290px
之间,无文本侧边栏的宽度在45
至95px
)。
A decent left sidebar template seems to be available here . 一个不错的左侧边栏模板似乎在这里可用 。 Do note I'm not supporting it in any way, but in terms of UI quality it looks superior to the "Dashboard" example featured on Bootstrap's examples page.
请注意,我不以任何方式支持它,但是就UI质量而言,它看起来比Bootstrap的示例页面上的“仪表板”示例更好。 ("Dashboard" example has same UI problem as yours: view it between
768px
and 1050px
wide) and see how it wraps) (“仪表盘”示例与您的用户界面存在相同的UI问题:查看其宽度在
768px
至1050px
之间),并查看其包装方式)
See if this helps you: 看看这是否对您有帮助:
http://jsfiddle.net/panchroma/u29bw8gn/ http://jsfiddle.net/panchroma/u29bw8gn/
When the navbar is fixed, it's taken out of normal flow, so it's width isn't constrained by the width of the column sidebar, the solution for this is 导航栏固定后,不会再正常流动,因此其宽度不受列侧栏宽度的限制,解决方案是
@media (min-width: 576px){
nav.navbar{
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
}
This makes the navbar the same width as your col-sm-2 sidebar. 这使导航栏的宽度与col-sm-2侧栏的宽度相同。
I've also added the following so that everything works well when the grid collapses to a single column 我还添加了以下内容,以便当网格折叠到单个列时一切正常
@media (max-width: 575px){
nav.navbar{
position:relative !important;
}
}
The above code essentially 'unfixes' the navbar when your bootstrap grid collapses to a single column. 当您的引导网格折叠到单个列时,以上代码本质上会“取消固定”导航栏。 The result is that the menu is then above your main content and scrolls with the rest of the page.
结果是菜单然后位于您的主要内容上方,并与页面的其余部分一起滚动。
Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.