5

我有一个漫画网站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">，以便包含标题的所有其他模板都在 .php 中containter而不是container-fluid.

任何想法为什么会发生这种情况？

谢谢！

4

5 回答 5

6

您没有为内容设置最小宽度，因此浏览器会将其“混合”以使其适应较小的分辨率。

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

#header { min-width: 1000px; }

（1000px 在这里是任意的）。这将防止标题换成两行，但显然会导致它的某些部分超出较小屏幕的可见区域。

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

于 2013-03-18T22:35:01.427 回答
2

尝试更改 Comic_style.css 中#header 元素中的溢出属性

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

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

于 2013-04-01T09:36:18.753 回答
2

好吧，首先不要在 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。

于 2013-04-05T13:20:00.327 回答
1

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

<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>
于 2013-04-02T23:59:58.843 回答
1

您可以使用 bootstrap nav 元素，而不是使用 spans：

    <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>
于 2013-04-03T18:24:59.153 回答