最好的方法和覆蓋Bootstrap CSS的麻煩

Question

我正在使用引導程序，但遇到一個問題，我必須將樣式硬編碼到頁面中才能使div正確運行。 當我在外部創建選擇器時，即使使用html和body選擇器也不會響應。

我的移動觀看代碼覆蓋

@media (max-width: 480px) {

html body.index { padding-bottom: 0px; color: #000; background-img: none; }

html body object { display: none; }
body div.fuller { display: none; }
footer { display: none; }
body .melt { margin: 0px; padding: 0px; border: solid 5px #000; }
iframe { margin-left: 0px; width: 560px; }
html body .retro { width: 480px; margin: 0px; overflow: hidden; }
}

我創建了一些媒體替代，但是其中一個由於內置樣式而無法正常工作。 我將其添加到.css文件時為何不起作用的任何想法？ 另外，這是你們為移動設備編寫代碼的方式嗎？ 這對我來說是新的，我樂於以任何方式解決它。

任何意見歡迎。

http://galnova.com是我的網站

Answer 1

你可以試試這個

<link rel="stylesheet" type="text/css" href="screen.css"   media="screen"   />
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" />

要么

@media handheld {

html body.index { padding-bottom: 0px; color: #000; background-img: none; }

html body object { display: none; }
body div.fuller { display: none; }
footer { display: none; }
body .melt { margin: 0px; padding: 0px; border: solid 5px #000; }
iframe { margin-left: 0px; width: 560px; }
html body .retro { width: 480px; margin: 0px; overflow: hidden; }
}

要么

@media only screen and (max-device-width: 480px) { ... }    

要么

@media handheld and (min-width: 20em) { ... } /* WIDTH */
@media screen and (max-height: 700px) { ... } /* HEIGHT */
@media screen and (device-width: 800px) { ... } /* DEVICE-WIDTH */
@media screen and (device-height: 400px) { ... } /* DEVICE-HEIGHT */

Answer 2

關於.retro樣式，您的CSS中有一個錯字

您擁有的gain.css行1229

htmlbody .retro { width: 480px; margin: 0px; overflow: hidden; }  

... html和正文之間缺少空格

希望這可以幫助！