How do I get an image to line up with the text in Bootstrap nav list?

问题

I'm trying to align an image with some text within a list item. I can't seem to get them to align though (see image).

How can I get the text and image to align? I am using the default CSS files from Bootstrap and have no customized CSS for any of the classes or elements shown in my markup.

Markup:

<div class="col-md-3">
    <ul class="nav">
        <li><%= link_to "Connect", "#", class: "footer-heading" %></li>
        <li><%= image_tag "facebook.png", size: "32"%><%= link_to "Facebook", "url" %></li>
        <li><%= image_tag "facebook.png", size: "32"%><%= link_to "Facebook", "url" %></li>
    </ul>
</div>

回答1:

In your CSS put either:

ul img{ display: inline-block; }

or

ul img{ float: left; }

Which should cause the image to be displayed inline with the text.

Alternatively add the image as a background image to the ul and position the text using padding. You can use different images by applying a class (of, for example 'facebook_icon') to the ul.

回答2:

Use Bootstrap list-inline..

<div class="col-md-3">
    <ul class="list-inline">
        <li>-</li>
        <li>-</li>
        <li>-</li>
    </ul>
</div>

Bootply

来源：https://stackoverflow.com/questions/20493884/how-do-i-get-an-image-to-line-up-with-the-text-in-bootstrap-nav-list