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是任意的）。 这将防止标题包裹到两行，但显然会使其中某些部分位于较小屏幕的可见区域之外。

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

Answer 2

尝试更改comic_style.css中#header元素中的overflow属性

#header {
background: url("images/SiteDesign/Comic_Header.png") repeat scroll 0 0 transparent;
height: 50px;
overflow: auto;scroll;
}

或bootstrap.css中的img标记可能会产生问题

img {
    border: 0 none;
    height: auto;
    vertical-align: middle;
}

为标题图像创建另一个标记

Answer 3

首先，不要在bootstrap.css中弄乱任何东西，通过编写新的css类或类似东西来纠正某些东西也不是那么聪明。

换句话说，不要尝试通过CSS修复它，因为以后会遇到更多问题。

所以我们走了

<div class="container-fluid">

这必须低于顶部。

<div id="header">

除非你想要什么，否则你不需要那个div

小心偏移，如果尝试这样的话：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">

最重要的是要记住，如果你修复了其他尺寸的东西，那么你必须这样做，而其他等等。这意味着你没有响应！

我的建议是尝试divs类的顺序，而不是css。

Answer 4

我查看了您网页上的代码，我相信这可以解决您的问题：

<div id="header">
   <div style="width: 950px;margin-left: auto;margin-right: auto;left: 0;right: 0;">
      <a href="./?action=homepage&amp;page=1&amp;site=comics"> <img id="logo" src="./images/SiteDesign/Logo_Small.png" alt="HTwS Logo"> </a> &nbsp;
      <div class="comicsSite" style="display: inline; background-clip: padding-box; padding-bottom: 15px;">  <a href="./?action=homepage&amp;page=1&amp;site=comics"> <img id="comicssubsite" src="./images/SiteDesign/Comics_subsites.png" alt="Comics"> </a> </div>
      <div class="comicsHeadingOffset" style="display: inline; margin: 0;"> <a href="./?action=about&amp;page=1&amp;site=about"> <img id="aboutsubsite" src="./images/SiteDesign/About_subsites.png" alt="About"> </a> </div>
      <div class="comicsHeadingOffset" style="display: inline; margin: 0;"> <a href="./?action=homepage&amp;page=1&amp;site=artwork"> <img id="artworksubsite" src="./images/SiteDesign/Artwork_subsites.png" alt="Artwork"> </a> </div>
   </div>
</div>

Answer 5

您可以使用bootstrap nav元素代替使用跨度：

    <div class="navbar>
      <div class="navbar-inner">
        <div class="container-fluid">
          <ul class="nav">
    <li><a href="#">Charts</a></li>
    <li><a href="#">Life</a></li>
    <li><a href="#">Office</a></li>
            <li><a href="#">Political</a></li>
            <li><a href="#">Misc</a></li>
      </ul>
     </div>
       </div>
    </div>