css - 是否可以覆盖网格系统以使用全宽

Question

我正在使用 Twitter Bootstrap 作为 Css 框架，并在想，当大多数显示器现在的分辨率1280 X n为 我非常喜欢 Bootstrap，以至于我现在不想停下来重新开始为更大的屏幕（或我老板想要的全屏宽度）编写 css 的整个过程。

是否可以更改/更改 hack 或命名它，将 css 文件调整为全屏或至少 1200Px 大小而不是它现在使用的 940px？

Answer 1

好吧，这很简单，我使用了 Twitter Bootstrap 中的所有好东西来进行样式设置，但剥离了 Grid System 以替换为Zurb Foundation Grid System here。通过不再为移动浏览器实施该站点，我没有什么比失去更多的时间了。谢谢社区

Answer 2

加载 tw-bs.css 后为类赋予新值

.container {
  width: 1200px;
}
.container-fluid {
  min-width: 1200px;
}

Answer 3

我这样做的另一种方法是创建一个 id 的 div，fluid-span然后使用以下 JQuery 将适当的 Bootstrap 跨度类应用于中间列内容 - 实际上，这将始终使中间内容相对于用户的浏览器视口尺寸：

<div class="row">

<div id="fluid-span">

[content goes here]


</div>

<div class="span4">

[this is your right sidebar content]

</div></div>

这是JQuery：

$(function(){
var width = $(window).width(),
new_class = width >= 1571 ? 'span17' :
            width >= 1411 ? 'span15' :
            width >= 1251 ? 'span12' :
            width >= 995 ? 'span8' : 'span8';
$('#fluid-span').removeClass('span17 span15 span12 span8').addClass(new_class);
//alert(width);
});

它的基本作用是将适当的跨度类附加到 id 为 的 div 中fluid-span。希望这可以帮助那些为 Bootstrap 寻找固定/流体解决方案的人！

这样做的一个限制是它不是动态的 - 如果您调整浏览器窗口的大小，则必须刷新页面才能使代码正常工作。我确信具有真正 JQuery 技能的人可以更好地重写它来做到这一点:)