如何使图像与Bootstrap导航列表中的文本对齐？ [英] 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>

解决方案

Use Bootstrap list-inline..

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

Bootply

这篇关于如何使图像与Bootstrap导航列表中的文本对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！