Bootstrap - 容器流体的对齐问题

Question

我有一个漫画网站,http://hittingtreeswithsticks.com,并希望我的标题保持100%的宽度(所以它在任何浏览器上延伸100%),但我的内容固定宽度(想要保持固定的950px宽度).

因此,我把页眉和页脚放在<div class="container-fluid">主要内容中<div class="container">以实现这一点.

我一直在IE9,Chrome和FireFox上进行本地测试,分辨率为1920 x 1080,标题看起来很好.

但是,当我在较小的显示器上测试时,1366 x 768,标题项目似乎在一起.

在header.php文件中,我为标题徽标和链接设置(简化)

<div class="container-fluid">
   <div id="header">
     <div class="row-fluid">
       <div class="span3 offset3">
         <logo>
       </div>
       <div class="span1">
        <comics link>
       </div>
       <div class="span1">
        <about link>
       </div>
      And so on...

在header.php中,我打开了一个空格,<div class="container">以便包含标题的所有其他模板都在containter其中container-fluid.

有什么想法可能会发生吗？

谢谢!

Answer 1

您没有为内容设置最小宽度,因此浏览器将"糊涂"它以使其适应较小的分辨率.

您可以尝试使用CSS规则,例如

#header { min-width: 1000px; } 

(此处1000px是任意的).这将防止标题包裹到两行,但显然会使其中某些部分位于较小屏幕的可见区域之外.

编辑:如果您提供代码或工作页面的链接,我们将能够看到是否存在影响这一点的填充/边距.