html - 如何将侧边栏设置为固定宽度？

Question

我有一个代码:Codepen.io .

<div class="container-fluid h-100">
        <div class="row wrapper h-100">
            <aside class="col-12 col-sm-3 p-0 bg-dark">
                <nav class="navbar navbar-expand-sm navbar-dark bg-dark align-items-start flex-sm-column flex-row">
                    <a class="navbar-brand" href="#"><i class="fa fa-bullseye fa-fw"></i> Brand</a>
                    <a href class="navbar-toggler" data-toggle="collapse" data-target=".sidebar">
                       <span class="navbar-toggler-icon"></span>
                    </a>
                    <div class="collapse navbar-collapse sidebar">
                        <ul class="flex-column navbar-nav w-100 justify-content-between">
                            <li class="nav-item">
                                <a class="nav-link pl-0" href="#"><i class="fa fa-heart-o fa-fw"></i> <span class="">Link</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link pl-0 dropdown-toggle text-nowrap" href="#m1" data-parent="#navbar1" data-toggle="collapse" data-target="#m1" aria-expanded="false">
                                    <i class="fa fa-address-card-o fa-fw"></i> <span class=""> Link</span>
                                </a>
                                <div class="collapse" id="m1">
                                    <ul class="flex-column nav">
                                        <a class="nav-link px-0 text-truncate" href="#">Sub</a>
                                        <a class="nav-link px-0 text-truncate" href="#">Sub longer</a>
                                    </ul>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span class="">Link</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link pl-0" href="#"><i class="fa fa-heart fa-fw"></i> <span class="">Link</span></a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </aside>
            <main class="col bg-faded py-3">
</main></div></div>

但我需要为所有分辨率设置固定宽度的左侧边栏，除了在移动 View 中我需要像现在一样看到(带有汉堡包的顶部菜单)。我需要做什么？

Answer 1

对 Bootstrap 的 sm 断点使用媒体查询并在“侧边栏”中设置最小/最大宽度...

@media (min-width: 768px) {
    aside.col-sm-3 {
        min-width: 200px;
        max-width: 200px;
    }
}

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

---

另见:Bootstrap 4: responsive sidebar menu to top navbar