2014-02-10 27 views
1

我使用引導程序的模式(版本2);默認大小是不是desireable所以我使用了以下CSS:引導程序的模態(與移動設備的兼容性問題)

#myModal{ 
    width: 80%; 
    margin-left: -40%; 
} 

但問題是我的模式的內容不符合了移動設備相兼容;我的意思是沒有水平滾動條了,文本內容不再出現;但是,如果我不應用所提到的CSS,則它與移動設備兼容;但問題是我的桌面上的寬度太小了。

+0

你可以添加一個鏈接到它正在這樣做的網站嗎? – GSaunders

+0

你在網頁上是否有<? – royhowie

+0

是的,我擁有它 – user385729

回答

1

引導是關於使用媒體查詢。既然你只關心桌面上的顯示器,你應該考慮使用它們!你可以玩最小寬度的值,但789px通常是iPad的。

@media (min-width: 789px) { 
      width:80%; 
      margin-left: -40%; 
     } 
0

如果你還沒有遠到你的網站,並使用引導2,我會建議所有的類轉換成流動佈局。如上所述,這將有助於您使用媒體查詢。

如果你真的很早開發,我會建議切換到引導3,因爲它更好地處理響應行爲。

無論哪種方式,bootstrap 2都有一個responsive.css文件,它有一組很好的媒體查詢來幫助你。

/* Large desktop */ 
@media (min-width: 1200px) { ... } 

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { ... } 

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 

/* Landscape phones and down */ 
@media (max-width: 480px) { ... } 

我的建議是檢查重新調整您的瀏覽器以及移動設備來檢查您的網站是抱着一起度過。