Question

我对引导网格系统有点问题。我在页面顶部创建了自己的导航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

将其加载为一整行删除。 div class = row navbar

中的类行

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

彼此之下的Bootstrap网格系统列

1 个答案: