Bootstrap 脚手架 @ 3600x1920

Question

我正在开发一个具有某种“协调器”界面的 Web 应用程序。我希望能够支持我正在使用的 Eyefinity 设置（即 3 个在 3600x1920 或 3780x1920 的纵向显示器，并启用了边框校正）。

我正在使用 Twitter Bootstrap，我认为它的响应式设计功能满足了我的需求，但我不确定如何根据需要对其进行自定义。

我基本上需要 3 列，每列约 1200 像素宽，但是当屏幕宽度小于 1920 像素宽时，我希望这些列分解为 3 行。

这可以通过将另一类设备添加到responsive.less 文件集来完成吗？

这是我目前正在使用的代码：

<div class="row-fluid">
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
</div>

以下是一些测试截图：

Too wide to fit comfortably on a standard screen

Same data, perfect at 3600x1920

Answer 1

好的，这比我预期的要容易。

我所要做的就是在我的顶级行中添加一个类（我称之为 row-eyefinity），然后将以下 CSS 添加到我的样式表中：

@media (max-width:3500px) {
    .row-eyefinity > [class*="span"] {
        float: none;
        display: block;
        width: auto;
        margin-left: 0;
    }
}