Bootstrap 网格系统列在彼此之下

Question

我对 bootstrap 网格系统有点问题。我在页面顶部创建了自己的导航 div。这一切都适用于更大的屏幕尺寸。当我将屏幕尺寸缩小到 xs 时，它就坏了。这就是我的目标：

| logo | link 1 | link 2 | link 3 | link 4|

以上适用于除 xs 以外的所有屏幕。对于 xs，我得到：

| logo | link 1 |
|      | link 2 |
|      | link 3 |
|      | link 4 |

而我想要的是：

| logo   |
| link 1 |
| link 2 |
| link 3 |
| link 4 |

这是我的代码：

<div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
    <div class="row">
        <div class="col-xs-12 col-md-6">
            <a href="/"><h1 class="logo">LOGO</h1></a>
        </div>
    </div>
    <div class="row navbar navigation">
        <div class="col-xs-12 col-md-6 navLinks">
            <div class="col-xs-12 col-md-3 navLink">
                <h4 class="links"><a href="videos.html">LINK 1</a></h4>
            </div>
            <div class="col-xs-12 col-md-3 navLink">
                <h4 class="links"><a href="photos.html">LINK 2</a></h4>
            </div>
            <div class="col-xs-12 col-md-3 navLink">
                <h4 class="links"><a href="about-us.html">LINK 3</a></h4>
            </div>
            <div class="col-xs-12 col-md-3 navLink">
                <h4 class="links" id="contactLink"><a>LINK 4</a></h4>
            </div>
        </div>
    </div> 
</div>

Answer 1

将其作为一整行加载删除。 Class 行来自 div class=行导航栏

删除行徽标部分的 div 行结束标记并将其放在末尾

Bootstrap 网格系统列在彼此之下

Bootstrap grid system columns under eachother

html

grid-system

twitter-bootstrap-3