html - 如何使 Bootstrap 3 列在更大的设备上换行内容？

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查询，我从来没有遇到过它们的问题，而且它们很容易掌握，特别是如果你知道如何做它们，我猜你会这样做，因为你提到了它们。

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

希望这有帮助。