Question

如果对此的回答相当明显，请提前道歉，我一直在研究答案，但我不确定我的措辞是否正确。

正如这些图片所示，每当我在一定尺寸下调整窗口大小时，我的导航栏就会从水平变为垂直。

这些图片将显示我的意思：

按预期...... http://imgur.com/lSGqBeU,jN27m0o#0
不太好。。。 http://imgur.com/lSGqBeU,jN27m0o#1

HTML：

<div class="navbar" id="navbar">
            <nav>
                <ul>
                    <div class="col-md-2">
                    <li><a>Blog</a></li>
                    </div>
                    <div class="col-md-2">
                    <li><a>Artists</a></li>
                    </div>
                    <div class="col-md-2">
                    <li><a>Shop/Listen</a></li>
                    </div>
                    <div class="col-md-2">
                    <li><a>About/Contact</a></li>
                    </div>
                    <div class="col-md-2">
                    <li><a>Photos/Videos</a></li>
                    </div>

                </ul>
            </nav>
</div>

CSS：

#navbar {
    background-color: #FFF;
    border-bottom: 2px solid #000;
    min-width: 800px;
    float: clear;

}

#navbar ul {

    position: relative;
    list-style-type: none;
    font-family: 'Amatic SC', cursive;
    font-size: 200%;
    font-weight: 100;
    margin: 0;
    padding: 0;
    width: 80%;
    margin-left: 300px;


}

#navbar li {

    margin-left: 10px
    display: block;
    font-weight: 200;
    margin-top: 30px;
    margin-bottom: 30px;
    list-style-type: none;
    position: relative;
    -webkit-flex-grow: 1;
    border: solid red 2px;


}

#navbar a {

    text-decoration: none;
    color: #68716A;
    font-weight: 200;
    top: 20px;

}

提前感谢您的任何帮助。

编辑：我正在使用Bootstrap作为列

Answer 1

＆＃34; COL-MD-2＆＃34;课程适用于中型屏幕。＆＃34; COL-XS-2＆＃34;如果你想让它在小屏幕上工作会更安全。

当屏幕宽度小于一定大小时，我的导航栏会从水平切换到垂直

1 个答案: