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

修改：如果您提供代码或指向工作页面的链接，我们就能看到是否存在影响此问题的填充/边距。< / p>

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">

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

我的建议是尝试使用div类的顺序，而不是使用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>