html - Bootstrap 脚手架 @ 3600x1920

Question

我正在开发一个具有某种“协调器”界面的网络应用程序。我希望能够支持我正在使用的 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;
    }
}