0

我正在开发一个具有某种“协调器”界面的 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>

下面是一些测试截图：

太宽，无法舒适地放在标准屏幕上

相同的数据，完美的 3600x1920

4

1 回答 1

2

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

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

@media (max-width:3500px) {
    .row-eyefinity > [class*="span"] {
        float: none;
        display: block;
        width: auto;
        margin-left: 0;
    }
}
于 2012-05-28T21:07:44.187 回答