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>

但是我需要为所有分辨率设置固定宽度的左侧边栏，除了在移动视图中，我需要像现在一样看到（带有汉堡包的顶部菜单）。我该怎么办？

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

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

1 个答案: