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

Posted 2023-04-13

【中文标题】带有图像和文本的引导菜单项

【英文标题】：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>

【参考方案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; 并使用浮动和填充来定位菜单项内的元素。