Google blogger 主題與bootstrap衝突

google blogger bootstrap

棕熊 2023-05-11 10:51:54 ‧ 923 瀏覽

分享至

大家好，小弟日前想在自己的google blogger安裝一小工具，會使用到bootstrap，但是當我進blogger主題的html編輯頁面，在</head>前加入以下程式碼

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>

後，卻發現網頁出現跑版
正常頁面
 異常頁面

想請各位提供協助

柯柯 iT邦新手 3 級 ‧ 2023-05-11 11:36:31 檢舉

box-sizing
https://ithelp.ithome.com.tw/articles/10252827
我自己想到的可能需要自己在加一些padding 或 margin去調整
或是看有沒有其他大神有其他方式處理

窮嘶發發發 iT邦高手 1 級 ‧ 2023-05-14 22:04:15 檢舉

我這邊看正常那一頁他是有載入bootstrap 的，畫面很正常
但異常那個沒有載入，不太確定樓主的問題是什麼
我們這麼說好了，你載入 bootstrap，是為了使用它定義好的類別選取器吧
如果同樣的頁面，你使用了定義好的選取器，但你卻不載入bootstrap定義的CSS檔案
當然畫面就會異常啊，簡單來說就是這樣，如果你有使用 JS 事件，狀況會更慘
因為JS事件你沒載入寫好的JS程序檔，你所有用到的JS事件都不會有任何作用
我的理解是這樣，有錯請指正

窮嘶發發發 iT邦高手 1 級 ‧ 2023-05-14 22:11:42 檢舉

最簡單的，col-12 表示欄寬是 100%
你有載入 bootstrap ，當然畫面就會顯示正確的欄寬
但是沒載入，天知道col-12是什麼意思，因為GOOGLE 預載的CSS沒有這個定義，
或許有，但它的定義不一定是 100%，有可能是 50%，因為GOOGLE 希望24等分
所以GOOGLE 最大是 col-24，而不是col-12 ( 舉例並非實際 )
也有可能十等分 col-10 就是 100% ，你沒有去翻預載的CSS 內容，你很難知道兩者之間的差異度
以上，個人心得

登入發表討論