引导容器，图像丢失对齐

Question

The page i've made so far can be viewed here .

And the HTML here: http://jsbin.com/fujozekoqama/1/edit?html

Notice what happens when you make the browser window smaller .

Why does the image lose alignment to the menu if they are in the same container?

Here are pictures of what I'm seeing:

aligned : http://i.imgur.com/aZUkVIR.png

unaligned : http://i.imgur.com/o0Mdg4J.png

Answer 1

You need to remove this from your styles, because it's affecting the responsiveness of the layout:

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

and add the .img-responsive class to your image, like this:

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

and then close the first .container div, which is open

with these tiny changes, it will work just as you want, and your layout will be responsive (which is the whole idea after Bootstrap after all).

If you need some min-width, add it in the .container class, not the inner elements. For this purpose, it's always a good idea to add an additional class to re-usable classes, for example <div class="container myMinWidth"> so you can target the .myMinWidth class without affecting the .container class, which you will need to use everywhere in Bootstrap.

And finally, unless you really need it (which you probably don't), avoid using fixed sizes in responsive layouts, if needed, try to use percentages, but make sure to check Bootstrap docs, because there are lots of built-in classes like img-responsive that will adjust your images like in your present situation