引導下拉橫向，像MS辦公室酒吧

我有這樣的風格

.officeColorStyle 
{ 
    background: #A0C0D3 !important; 
    color: #A0C0D3; 
} 
.officeColorStyleFont 
{ 
    background: inherit !important; 
    color: #0033ff; 

} 
.items:hover .dropdown-menu ,dropdown-item{ 
display: inline-block; 
margin-top: 0; 
} 
.items{ 
    display:inline-block; 
} 
.dropdown-menu.officeBar 
{ 
    position: absolute; 
    min-width: 700px !important; 
} 
.imagesOfficeBar{ 
    width: 35px; height: 35px; 
} 
.divider-vertical { 
height: 50px; 
    margin: 0 0px; 
    border-left: 2px solid #F2F2F2; 
    border-right: 2px solid #FFF; 
    width: 100px;height: 100px; 
    }

，這是在導航欄的代碼

<div class="officeColorStyle"> 
     <ul> 
      <div> 
      <li class="dropdown items"> 
        <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
         DOCUMENTOS 
        </a> 
       <div class="dropdown-menu officeBar officeColorStyle divider-vertical" style="position: absolute !important;"> 


        <a class="dropdown-item" href="/documentada/1"> 
         <img class="imagesOfficeBar" src=" /img/navBar office style images/Politicas.jpg" /> 
         <span>POLITICas</span> 

        </a> 
        <a class="dropdown-item" href="/documentada/2"> 
         <i class="fa fa-book imagesOfficeBar"></i> 
         Manuales 
        </a>   
       </div> 

      </li> 
      </div> 
     </ul> 

    </div>

我需要出現在頂部的文本圖像，但我不知道如何做到這一點，導致圖像出現在文字前 image appears before text

其他的事情，有沒有什麼辦法可以使用像素精確尺寸的引導真棒字體

非常感謝

來源

2017-06-20 dlogon

我想這樣的菜單，當你將鼠標懸停在產品 http://www.gateway.com/gw/en/US/content/home – dlogon

難道你不只是添加換行符？

<a class="dropdown-item" href="/documentada/1"> 
    <span>POLITICas</span> <br /> 
    <img class="imagesOfficeBar" src=" /img/navBar office style images/Politicas.jpg" /> 
</a>

https://jsfiddle.net/99pw3njr/ - 我沒有在圖像中，但在這裏，你可以看到在圖像將是輪廓。那不是你的意思？

來源

2017-06-20 15:46:33 lukecolli98

如果我這樣做'
Politicas
Manuales ' 結果是[鏈接]（http://imgur.com/kG147tC） – dlogon

這不是你想要的嗎？ – lukecolli98

引導下拉橫向，像MS辦公室酒吧

回答

相關問題