引導無用空間修飾

我用this fix針對移動設備上引導模態作爲某些新的代碼鹼：引導無用空間修飾

自舉-responsive.css

.modal { 
    position: fixed; 
    top: 3%; 
    right: 3%; 
    left: 3%; 
    bottom:3%; 
    width: auto; 
    margin: 0; 
} 
.modal-body { 
    height: 60%; 
}

bootstrap.css

.modal-body { 
    max-height: 350px; 
    padding: 15px; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
}

問題是我有我得到額外的空間在模態的底部。

Preview

如何刪除這個空間？

我做了一個fiddle，證明了這個問題。

嘗試用的480寬度改變瀏覽器的高度，這fiddle模態軀應該堅持在底部，但它不是，當我刪除bottom:3%在.modal一切正常像this或this但高度的.modal重疊畫面的高度和其不響應

來源

2013-07-12 Snippet

你可以發佈你的HTML /做出的jsfiddle？嘗試底部：0;在你自己的樣式表中 –

刪除.modal-body css中的padding屬性 –

剛剛創建的小提琴 – Snippet

你可以檢查，看看是否方向是橫向 - 並最小化模態，身體的大小ccordingly

FIDDLE

@media only screen 
and (orientation : landscape) { 
    .modal-body { 
     height: 160px; 
    } 
}

哦，順便說一下：

在我搞掂模型的圓角小提琴以及通過添加類：

.modal-footer 
{ 
    border-radius: 0 0 4px 4px; 
}

來源

2013-07-22 05:26:19 Danield

已經完成了..但是如果我在移動風景模式下查看網站，我看不到頁腳。 – Snippet

@Snippet我編輯了我的答案 – Danield

剛剛在設備上測試..作品完美..但我應該添加什麼，以便平板設備上的模態身體的高度不是160px。在小設備上也有問題。看不到頁腳按鈕。 – Snippet

移除填充底：

.modal-body { 
    max-height: 350px; 
    padding: 15px; 
    padding-bottom: 0; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
}

來源

2013-07-12 08:22:38

我檢查了代碼，如果你試試嗯給模態的底部屬性，我認爲這是你正在尋找。

.modal { 
    position: fixed; 
    top: 3%; 
    right: 3%; 
    left: 3%; 
    /*bottom:3%;*/ /* if u comment this the issue gets resolved */ 
    width: auto; 
    margin: 0; 
}

另外，還要改變你的模式頁腳的CSS所以它也採用相同的圓潤，邊角爲模態

.modal-footer 
{ 
    border-radius: 0 0 3px 3px; 
}

來源

2013-07-22 06:14:29 LegendaryAks

引導無用空間修飾

回答

相關問題