html - 带有固定顶部 : text overflows 的 Bootstrap 4 导航栏

Question

抱歉，可能是菜鸟问题。 我正在尝试使用 bootstrap 4 有一个侧边导航栏，这将是固定的(即当我滚动页面时它保持在相同的位置)。添加“固定顶部”类确实可以，但是我的导航栏中的文本溢出并超出了导航栏，看起来非常难看:

没有'fixed-top'，它看起来不错(当然不符合我的要求):

我做错了什么？

请参阅 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>

谢谢!

Answer 1

fixed-top，顾名思义，不是用于“左” 导航栏，而是用于“顶部” 导航栏。

通过向导航栏添加类无法实现您想要实现的目标。您需要申请:

position: fixed;
top: 0;
min-height: 100vh;

到列并且还可以将内容列偏移侧边栏的宽度，因为 position:fixed 元素已从文档流中取出，因此如果您不偏移其余部分，它们会重叠。

这里是:

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

注意内容列中的 offset-0 offset-sm-2 类。我还从边栏中删除了 p-0。这在当前上下文中没有任何意义。

另一个注意事项是，具有可变宽度的侧边栏通常被认为是糟糕的 UI。最流行的 UI 框架和主题具有固定宽度的侧边栏(在 210 和 290px 之间用于普通侧边栏和 45 到 95px 无文本侧边栏的宽度)。

一个不错的左侧边栏模板似乎是available here .请注意，我不以任何方式支持它，但就 UI 质量而言，它看起来优于 Bootstrap 示例页面上的“仪表板”示例。 (“仪表板”示例与您的 UI 问题相同:在 768px 和 1050px 之间查看它)并查看它是如何包装的)