moodle：如何更改bootstrap主題'clean'中的列大小？

我試圖改變基於bootstrap的moodle主題'clean'的列大小。我的Moodle使用三列布局。左側和右側的列太寬，我想讓它們變得更窄，以便中間的列可以顯示得更寬。 Moodle在管理界面中提供了一個textarea來添加你自己的CSS代碼。我添加以下代碼：moodle：如何更改bootstrap主題'clean'中的列大小？

.row-fluid .span9 { 
    width: 80.0%; 
    } 
    .row-fluid .span8 { 
    width: 80.0%; 
    } 
    .row-fluid .span3 { 
    width: 15.0%; 
    } 
    .row-fluid .span4 { 
    width: 15.0%; 
    }

這一切看起來桌面屏幕上很好，但如果我縮放瀏覽器窗口下，以模擬的智能手機分辨率這是行不通的。左右欄移動到底部，但不要使用屏幕的整個寬度，但是我在設置中定義了15％。我想我正在使用錯誤的類並覆蓋桌面和移動設計的大小。如果有人知道如何在桌面版本中更改列大小而不用在移動版本中覆蓋它，那太棒了！

來源

2013-11-21 user3018108

在引導，所有span*元素恢復到100％的寬度在767px及以下，如下所示：

http://getbootstrap.com/2.3.2/scaffolding.html#responsive

發生了什麼事是你設置這些具體span元素的寬度多後來就停機CSS文件，因此覆蓋了將寬度設置爲100％的Bootstrap部分。

要，答案是你在做什麼遵循，以確保您在這個破發點重置寬度恢復到100％：

.row-fluid .span9 { 
    width: 80.0%; 
} 
.row-fluid .span8 { 
    width: 80.0%; 
} 
.row-fluid .span3 { 
    width: 15.0%; 
} 
.row-fluid .span4 { 
    width: 15.0%; 
} 

/* set back to 100% for smaller screens */ 
@media (max-width: 767px) { 
    .row-fluid .span9, 
    .row-fluid .span8, 
    .row-fluid .span3, 
    .row-fluid .span4 { 
     width: 100%; 
    } 
}

就像你的一個附加的註釋：全如果可能的話，Bootstrap的目的就是避免像這樣入侵網格。我懷疑你會發現在這裏強制這些寬度也會在你的網站的其他地方產生連鎖效應。

每個「跨度」大約相當於寬度的6％（不考慮每個之間的邊距），因此對您的要求更好的回答是編輯頁面標記。您目前正在使用.span4和.span3並隨後將其強制爲15％，這些可以更改爲.span2，這與您當前強制的15％寬度大致相同。然後調整位於該行內的其他跨度元素以佔據空白區域。

來源

2013-11-21 16:12:39 johnkavanagh

你好johnkavanagh，非常感謝您的迴應。我試過你的代碼，它的工作原理！我在iPad 1，Galaxy Ace和Galaxy S3上測試了從1024x768到1920x1080的桌面分辨率。結果總是看起來不錯 – user3018108

-3

我曾嘗試增加中間列的寬度，以便我們可以在不滾動它的情況下查看內容。爲此我們不需要編寫任何編碼。只需進入「主題設置」，然後進入「主題設計器模式「並檢查該框，以便我們可以爲我們自己的主題。然後進入「主題選擇器」，然後選擇「清除主題現金」，然後點擊「更改主題」。

來源

2017-06-30 11:43:07

moodle：如何更改bootstrap主題'clean'中的列大小？

回答

相關問題