Как мне установить боковую панель с фиксированной шириной?

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

Используйте медиазапрос для точки останова sm Bootstrap и установите минимальную / максимальную ширину в «боковой панели» ...

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

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

Также см .: Bootstrap 4: отзывчивое меню боковой панели к верхней панели навигации