Загрузочный контейнер, изображение теряет выравнивание

Question

Страница, которую я сделал до сих пор, можно посмотреть here.

И HTML здесь: http://jsbin.com/fujozekoqama/1/edit?html

Обратите внимание, что происходит, когда вы делаете в окне браузера меньше.

Почему изображение теряет выравнивание по меню, если оно находится в одном контейнере?

Вот фотографии того, что я вижу:

выравненные: http://i.imgur.com/aZUkVIR.png

выровненным:

Answer 1

Вы должны удалить это из ваших стилей, потому что это влияет на отзывчивость от макета:

.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">, чтобы вы могли настроить таргетинг на класс .myMinWidth, не затрагивая класс .container, который вам нужно будет использовать везде в Bootstrap.

И, наконец, если вам это действительно не нужно (чего вы, вероятно, нет), избегайте использования фиксированных размеров в адаптивных макетах, если необходимо, попробуйте использовать проценты, но не забудьте проверить документы Bootstrap, потому что есть много встроенные классы, такие как img-responsive, которые будут корректировать ваши изображения, как в вашей ситуации