Question

我基本上是在尝试构建一个导航栏（我不想使用Bootstrap导航栏），而在手机上（xs）我希望单个项目是全宽的，但是在所有大型设备上我只是想让它们自然流动。

现在我有了这个，显然设置除xs设备以外的所有宽度，但这对于文本看起来并不自然。

<div class="row header">
    <a href="/creations"><div class="col-sm-2 bar-col">
        Creations
    </div></a>
    <a href="/blog"><div class="col-sm-2 bar-col">
        Blog
    </div></a>
    <a href="/teaching"><div class="col-sm-2 bar-col">
        Teaching
    </div></a>
</div>

有没有Bootstrap方法来做到这一点？最好的方法是什么？我一直在考虑放弃这里的Bootstrap东西，并使用@media查询来实现这一点。我应该去吗？

Answer 1

我会使用@media查询，我从来没有遇到任何问题，而且很容易掌握，特别是如果你知道如何做这些，我猜你做的是因为你提到它们。< / p>

哦，如果你看一下bootstrap.css，它会使用@media查询本身，因为这是css的“内置”响应部分......

希望这有帮助。

Answer 2

最终并没有那么难，我甚至和Bootstrap一起工作。

<div class="row header">
    <div class="col-sm-9">
        <div class="row">
            <a href="/creations"><div class="col-xs-12 bar-col text-nav">
                Creations
            </div></a>
            <a href="/blog"><div class="col-xs-12 bar-col text-nav">
                Blog
            </div></a>
            <a href="/teaching"><div class="col-xs-12 bar-col text-nav">
                Teaching
            </div></a>
        </div>
    </div>
</div>

@media (min-width: @screen-sm-min) {
    .text-nav {
        width: auto;
    }
}

简单！ col-xs-12处理小型设备的情况，并且大型设备会覆盖该行为。

如何使Bootstrap 3列在更大的设备上包装内容？

2 个答案: