Bootstrap容器，圖像丟失對齊

-1

我到目前爲止所做的頁面可以被看作here。Bootstrap容器，圖像丟失對齊

而且這裏的HTML：http://jsbin.com/fujozekoqama/1/edit?html

通知時，你的瀏覽器窗口小會發生什麼。

爲什麼圖像如果在同一個容器中會失去對齊菜單？

這裏是我所看到的圖片：

對準：http://i.imgur.com/aZUkVIR.png

對齊：

來源

2014-10-02 ThatGuy343

我看不到任何對齊損失。 – 2014-10-02 04:49:27

您需要從您的樣式中刪除此，因爲它影響了響應的佈局：

.container .navbar-default { 
    min-width:640px; 
    width:640px; 
    }

和.img-responsive類添加到您的圖像，像這樣：

<img class="logo img-responsive" src="http://placehold.it/350x75">

，然後關閉第一.container DIV，這是開放

這些微小的變化，它會爲你只想工作，你的佈局將會有所反應（畢竟這是Bootstrap之後的全部想法）。

如果您需要一些最小寬度，請將其添加到.container類中，而不是內部元素。爲此，向可重用類添加額外的類總是一個好主意，例如<div class="container myMinWidth">，因此您可以在不影響.container類的情況下定位.myMinWidth類，您需要在Bootstrap中隨處使用該類。最後，除非你真的需要它（你可能不需要它），如果需要的話，避免在響應式佈局中使用固定大小，嘗試使用百分比，但一定要檢查Bootstrap文檔，因爲有很多內置類像img-responsive，將調整您的圖像像你目前的情況

來源

2014-10-02 04:50:26 Devin

+1對你寫作如此清楚有好處。 – Christina 2014-10-02 05:24:31

Bootstrap容器，圖像丟失對齊

回答

相關問題