帶圖像和文本的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

你需要移動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;並使用浮動和填充來定位菜單項中的元素。