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

【问题标题】：How to Make Bootstrap 3 Columns Wrap Content on Larger Devices?如何让 Bootstrap 3 列在更大的设备上包装内容？
【发布时间】：2014-05-24 22:45:27
【问题描述】：

我基本上是在尝试构建一个导航栏（我不想使用 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 东西并使用@media 查询来实现这一点。我应该去吗？

【问题讨论】：

不要忘记，如果您确实使用自己的媒体查询，您可以使用 Bootstrap 变量来指定设备大小：@media (min-width: @screen-sm-min) { ... }

标签： html css twitter-bootstrap media-queries

【解决方案1】：

结果并没有那么难，我什至与 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 处理小型设备的情况，而大型设备的行为会被覆盖。

【讨论】：

在这个 html 部分有 3 个打开的 div 和 6 个关闭的 div...而且，锚标记内的关闭 div 似乎是一个错误。

【解决方案2】：

我会使用@media 查询，我从来没有遇到过它们的问题，而且它们很容易掌握，特别是如果你知道怎么做，我猜你会这样做，因为你提到了它们。

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

希望这会有所帮助。

【讨论】：