如何使图像与Bootstrap导航列表中的文本对齐? [英] How do I get an image to line up with the text in Bootstrap nav list?
本文介绍了如何使图像与Bootstrap导航列表中的文本对齐?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图将图像与列表项中的某些文本对齐。我似乎不能让他们排列,虽然(见图)。
如何获得文本和图像对齐?我使用的是来自
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屋!
查看全文