イメージをブートストラップに追加しますか？

Question

私は自分のページの各選択オプションの横に追加したい7x7pxイメージを持っています。 イメージをCSSに追加する必要がありますか、それともHTMLに追加できますか？テキストの左側にもイメージがあります。私も画像を追加しようとしましたが、それはちょうどスタイルを台無しにする。 助けてくれてありがとう！

<ul class="dropdown-menu"> 
     <li> 
      <a href="#">Red</a> 
     </li> 
     <li> 
      <a href="#">Green</a> 
     </li> 
    </ul> 

Answer 1

これはおそらく、あなたが望んでいたものです：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Image Droprdown 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu"> 
 
    <li> 
 
     <a href="#"> 
 
     <img src="http://www.thisisanfield.com/images/flat_web_icon_set/color/Facebook.png" width="17px" />Facebook</a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <img src="http://www.atmospherehotelsandresorts.com/images/icon-twitter.png" width="17px" />Twitter</a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <img src="https://cdn1.iconfinder.com/data/icons/thincons/100/menu-128.png" width="17px" />List Image</a> 
 
    </li> 
 
    </ul> 
 
</div>

オルタナティブ：

var shownnn = "yes"; 
 
var dropd = document.getElementById("image-dropdown"); 
 

 
function showww() { 
 
    dropd.style.height = "auto"; 
 
    dropd.style.overflow = "y-scroll"; 
 
} 
 

 
function hideee() { 
 
    dropd.style.height = "30px"; 
 
    dropd.style.overflow = "hidden"; 
 
    } 
 
    //dropd.addEventListener('mouseover', showOrHide, false); 
 
    //dropd.addEventListener('click',showOrHide , false); 
 

 

 
function myfuunc(imgParent) { 
 
    hideee(); 
 
    var mainDIVV = document.getElementById("image-dropdown"); 
 
    imgParent.parentNode.removeChild(imgParent); 
 
    mainDIVV.insertBefore(imgParent, mainDIVV.childNodes[0]); 
 
}

#image-dropdown { 
 
    display: inline-block; 
 
    border: 1px solid; 
 
} 
 
#image-dropdown { 
 
    height: 30px; 
 
    overflow: hidden; 
 
} 
 
/*#image-dropdown:hover {} */ 
 

 
#image-dropdown .img_holder { 
 
    cursor: pointer; 
 
} 
 
#image-dropdown img.flagimgs { 
 
    height: 30px; 
 
} 
 
#image-dropdown span.iTEXT { 
 
    position: relative; 
 
    top: -8px; 
 
}

<!-- not tested in mobiles --> 
 

 
<div id="image-dropdown" onmouseleave="hideee();"> 
 
    <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();"> 
 
    <img class="flagimgs first" src="http://www.google.com/tv/images/socialyoutube.png" /> <span class="iTEXT">First</span> 
 
    </div> 
 
    <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();"> 
 
    <img class="flagimgs second" src="https://cdn1.iconfinder.com/data/icons/thincons/100/menu-128.png" /> <span class="iTEXT">Second</span> 
 
    </div> 
 
    <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();"> 
 
    <img class="flagimgs second" src="http://www.google.com/tv/images/lplay.png" /> <span class="iTEXT">Third</span> 
 
    </div> 
 
    <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();"> 
 
    <img class="flagimgs second" src="https://cdn1.iconfinder.com/data/icons/thincons/100/menu-128.png" /> <span class="iTEXT">Fourth</span> 
 
    </div> 
 
</div>

Source