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

Question

如果这个问题的答案相当明显，请提前致歉，我一直在研究答案，但我不确定我的措辞是否正确。

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

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

1. 如预期... http://imgur.com/lSGqBeU,jN27m0o#0
2. 不完全是。 . . 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

“col-md-2”类适用于中型屏幕。如果您希望它也能在小屏幕上工作，“col-xs-2”会更安全。