image - 带有图像和文本的 Bootstrap 菜单项

Question

我正在尝试添加图像和文本作为 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>

Answer 1

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

<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;并使用 float 和填充来定位菜单项内的元素。