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

您需要移动clearfix上方的<a>标记，然后移除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;并使用浮点数和填充来定位菜单项内的元素。

带图像和文本的Bootstrap菜单项

1 个答案: