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

【问题标题】：How can I set my sidebar with a fixed width?如何将侧边栏设置为固定宽度？
【发布时间】：2019-05-23 15:43:56
【问题描述】：

我有一个代码：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>

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

【问题讨论】：

尝试在你的 CSS 中覆盖导航引导类
@Zim 问题未解决。我离开了这家企业。

标签： html css bootstrap-4

【解决方案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

【讨论】：