带有图像和文本的引导菜单项答案

【问题标题】：Bootstrap Menu Item with Image and Text带有图像和文本的引导菜单项
【发布时间】：2014-11-27 00:08:41
【问题描述】：

我正在尝试将图像和文本添加为 Bootstrap 菜单项。

我希望能够以与其他项目相同的方式看到此自定义菜单项上的悬停效果。

另外，我的 CSS 代码很脏；它使用width:300px、div 内链接等。有人可以建议我如何更好地做到这一点吗？

我的代码可以看到here。

<li>
    <div class="clearfix">
        <a href="/" style="display:block; width:300px; padding-left:20px;  color: black;" >
            <div class="pull-left">
                <img src="http://images.apple.com/iphone/home/images/productbrowser/icon_iphone_6.png" />                         
            </div>
            <div class="pull-left" style="margin-left:10px;">
                <span><strong>iPhone 6</strong></span>
                <br />
                <span>Bigger than bigger</span>
            </div>
        </a>
    </div>
</li>

【问题讨论】：

标签： image twitter-bootstrap menu navigation

【解决方案1】：

您需要将<a> 标记移到clearfix 上方，然后删除a 上的内联color:black;，以便悬停颜色更改起作用。

<li>
    <a href="/" style="display:block; width:300px; padding-left:20px;" >
        <div class="clearfix">
            <div class="pull-left">
                <img src="http://images.apple.com/iphone/home/images/productbrowser/icon_iphone_6.png" />                         
             </div>
             <div class="pull-left" style="margin-left:10px;">
                 <span><strong>iPhone 6</strong></span>
                 <br />
                 <span>Bigger than bigger</span>
             </div>        
         </div>
     </a>
 </li>

JSFiddle here

关于 css，首先，我不会使用内联样式 - 将样式放在样式表上。您最好使用width: auto; 并使用浮动和填充来定位菜单项内的元素。

【讨论】：