html - Bootstrap 4 列内的固定顶部导航栏

Question

我正在尝试创建一个布局，在左侧有一个侧边栏，在右侧有一个固定的顶部导航栏，下面是我的网站内容。我有什么:

<div class="container-fluid">
        <div class="row no-gutter">

            <!-- left side -->
            <div class="col-md-4 sidebar" style="background-color: red;">
                <p>test</p>
            </div><!-- end left side -->

            <!-- right side -->
            <div class="col-md-8 offset-md-4">

                <!-- nav -->
                <div class="row no-gutter" style="background-color: blue">
                    <nav class="col-12 navbar fixed-top navbar-toggleable-md">
                        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbar">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Home</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div><!-- end nav -->

                <!-- main content -->
                <div class="row no-gutter" style="background-color: green;">
                    <div class="col-12">
                       <p> main content </p>
                    </div>
                </div><!-- end main content -->

            </div><!-- end right side -->
        </div>
</div>

https://jsfiddle.net/0ka85tmn/1/

我似乎无法正确获取导航栏。它不会留在我的专栏内。我玩过 position 属性，但无法正常工作。

有人可以帮忙吗？

Answer 1

使用 position:fixed 将导航栏从正常文档流中取出并使其相对于整个页面，因此它不再包含在其父页面中。因此，您需要专门设置导航栏的位置...

.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    left: 33.3333%;
    z-index: 1;
}

此外，没有理由将它包含在 row 和 col-12 中。

演示:http://www.codeply.com/go/5bPIH8Tbiw