Question

我正在使用Twitter Bootstrap作为Css框架，当大多数监视器现在处于1280 X n分辨率时，为什么在我能够有效地使用它时浪费该空间？我非常喜欢Bootstrap，我现在不想停下来，重新开始为更大屏幕编写css的全过程（或者我老板想要的全屏宽度）。

是否可以更改/更改黑客或你的名字，css文件调整到全屏或至少1200Px大小而不是它现在使用的940px？

Answer 1

这很简单，我使用Twitter Bootstrap中的所有好东西进行样式设置，但剥离了网格系统以替换为Zurb Foundation Grid System here。由于没有为移动浏览器再次实施该网站，我没有什么可以失去的，而不是增加额外的时间。谢谢SO社区

Answer 2

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

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

Answer 3

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

<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);
});

它基本上做的是将正确的span类附加到id为fluid-span的div。希望这可以帮助那些寻找固定/流体解决方案Bootstrap的人！

这方面的一个限制是它不是动态的 - 如果您调整浏览器窗口的大小，则必须刷新页面才能使代码生效。我敢肯定拥有真正JQuery技能的人可以更好地重写这一点：）

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

3 个答案: