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>