我將我的頁面分爲3個不同的模塊：左側導航，中央圖像和社交側欄右側。以下是格式化此內容的CSS。當我調整窗口時，我遇到了麻煩;中間的圖像與左側的導航重疊，側邊欄被推到頁面的底部並與左側導航的結尾重疊。導航模塊/側欄已修復。如何在調整窗口大小時正確顯示內容？

我使用twitter bootstrap作爲基礎。

任何想法是什麼導致這種情況，以及如何解決這個問題？

CSS

div.sidebar{ 
    width: 120px; 
    position:fixed; 
    top:12%; 
    left:2%; 
    overflow-y:auto; 
    height:100%; 
}

HTML

<div class ="container-fluid"> 
<div class = "row-fluid"> 
<!-- left navigation div --> 
    <div class = "span1" style = "width:120px;"> 
      <div class = "sidebar" > 
      #navigation 
      </div> 
     </div> 

<!-- middle images div --> 
     <div class = "span8" style = "width: 900px;"> 
      #lot of images 
     </div> 

<!-- social sidebar --> 
     <div class = "span2" style = "margin-left: 10px; "> 
      #social module with images 
     </div> 
</div> 
</div>

當我使窗口小

enter image description here

正常

enter image description here

來源

2012-12-04 sharataka

夫婦的問題，我看到了

你完全戰勝的「.row流體」的宗旨，通過增加寬度的框架？刪除網格元素的所有寬度分配（即.container，.row，.span（x）），並讓框架完成它設計的任務...爲您創建寬度。如果您需要根據生成的內容調整寬度，請將其添加到.span（x）的塊級別元素INSIDE中。
您的跨度必須加起來不超過12個。您有14個絕對會使最後一次環繞。

來源

2012-12-05 03:02:10

謝謝你的回答。這是否意味着我必須更改twitter-bootstrap css並將span1的默認值更改爲我需要的寬度？ – sharataka

不，看看我給的網站，也看看我的降價。你的跨度不得不加起來爲12。 – joshuahornby10

你有沒有想過響應式網頁設計？

你說你使用twitter bootstrap？看看這個：

http://twitter.github.com/bootstrap/scaffolding.html#responsive

添加這頭

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

更改HTML：

<div class="container-fluid"> 
<div class="row-fluid"> 
    <!-- left navigation div --> 
    <div class="span4"> 
     <div class = "sidebar" > 
     #navigation 
     </div> 
    </div> 

    <!-- middle images div --> 
    <div class="span6"> 
     #lot of images 
    </div> 

    <!-- social sidebar --> 
    <div class="span4"> 
     #social module with images 
    </div> 
</div>

未經測試。我也不是100％的流體容器有多大，我認爲它的12，如果它的16你將不得不改變跨度，所以他們加起來多達16個

來源

2012-12-04 22:10:37 joshuahornby10

我應該提到，我確實有個別模塊之前容器液和排液的效果。 – sharataka

好吧，那麼你一定不能鏈接到樣式表。你確定你頭上有所有正確的文件和鏈接嗎？ – joshuahornby10

請發佈完整的html文件。 – joshuahornby10

用內聯寬度覆蓋跨度會導致奇怪的行爲。你可以使用默認的TBS腳手架嗎？

來源

2012-12-04 23:17:47

建議：

1.去除所有你把樣式讓引導d多餘的東西事情！

2.always測試與「井」

你的DIV把你的代碼是這樣

<div class="container"> 
<div class="row" style="margin-top:20px;"> 
    <div class="col-lg-3 col-sm-12 "> 
    <div class="well"></div> 
    </div> 
    <div class="col-lg-3 col-sm-12 "> 
    <div class="well"></div> 
    </div> 
    <div class="col-lg-3 col-sm-12 "> 
    <div class="well"></div> 
    </div> 
    <div class="col-lg-3 col-sm-12 "> 
    <div class="well"></div> 
    </div> 
</div>

COL-LG- *大型設備 COL-XS-*用於額外小型設備 col-sm- *適用於小型設備

使用它就像這樣可以實現五個你想要什麼

Plunker demo

調整您的瀏覽器查看

來源

2015-11-17 07:34:59

如何在調整窗口大小時正確顯示內容？

CSS

HTML

當我使窗口小

正常

回答

相關問題