如何在移动网络节目中更改div位置？

Question

我是bootstrap的新手，css写了这个Bootstrap和CSS代码：

<div class="row">
    <div class="col-md-1 col-md-4 col-md-12" style="background-color: yellow; width: 100%; height: 100%; position: fixed;">
        <div id="nav">

        </div>
    </div>
</div>

CSS

.full-width-div {
    position: fixed;
    min-height: 100%;
    height: 100%;
    background-color: yellow;
}
#nav {
    margin-left: 0px;
    width: 96px;
    height: 100%;
    background-color: blue;
}

但是当我在移动设备上看到我的网站时，导航div上升到屏幕，现在宽度设置为100%，我该如何设计？感谢。

Answer 1

col-md-1 col-md-4 col-md-7请使用总计12

Answer 2

请你试试Bootstrap导航栏中的Bootstrap Navbar，在网络上，它会显示如下：

在移动设备中，它会显示为：

请查看此代码https://getbootstrap.com/components/#navbar