將圖像添加到Bootstrap3的默認導航欄下拉菜單中的最佳方式是什麼？我想在下面的圖片中重新創建佈局，圖片填充到下拉菜單中項目的右側。有什麼想法嗎？將圖像添加到引導程序下拉菜單
編輯：我打算在移動設備上隱藏圖像以獲得更好的可用性，所以我只想在桌面上使用這種佈局。
下面是我在哪裏到目前爲止
.dropdown-menu {
padding-right: 150px; /* width of img */
position: relative;
}
.dropdown-menu:after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 150px; /* width of img */
background: url(http://placehold.it/150x220) center;
background-size: cover;
}
它的工作！看演示小提琴！
HTML
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown with Image 1 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Menu Item 1</a>
<img src="http://placekitten.com/g/200/300" class="navimg">
</li>
<li><a href="#">Menu Item 2</a>
</li>
<li><a href="#">Menu Item 3</a>
</li>
<li><a href="#">Menu Item 4</a>
</li>
<li><a href="#">Menu Item 5</a>
</li>
<li><a href="#">Menu Item 6</a>
</li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown with Image 2 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Menu Item 1</a>
<img src="http://placekitten.com/g/200/300" class="navimg">
</li>
<li><a href="#">Menu Item 2</a>
</li>
<li><a href="#">Menu Item 3</a>
</li>
<li><a href="#">Menu Item 4</a>
</li>
<li><a href="#">Menu Item 5</a>
</li>
<li><a href="#">Menu Item 6</a>
</li>
</ul>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
CSS
.dropdown-menu {
padding-right: 150px;
/* width of img */
position: relative;
}
.dropdown-menu:after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 150px;
/* width of img */
background: url(http://placehold.it/150x220) center;
background-size: cover;
}
.nav .dropdown-menu ul {
position:relative;
overflow:auto;
}
.navimg {
position:absolute;
top:0;
right:0;
height:100%;
}
.dropdown-menu {
position: absolute;
}
你會做到這一點a fiddle：
.dropdown-menu {
padding-right: 100px; /* width of img */
position: relative;
}
.dropdown-menu:after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 100px; /* width of img */
background: url(YOUR URL) center;
background-size: cover;
}
技巧是很容易的。您在右側擴展下拉框的填充以爲元素留出空間，然後在圖像之後創建僞元素。
如果你想讓它僅顯示在桌面上，只需將它包裝在適當@media query.
你的意思是你想每個下拉菜單有不同的BG？您可以使用attr（data-image）作爲css prop值併爲每個.dropdown菜單div設置它。 – pie6k 2014-09-03 12:11:36
試試這個：link to bootply（更新）
HTML：
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<div class="col-md-10">
<li><a href="#">Longer menu item</a></li>
<li><a href="#">More longer menu item</a></li>
<li><a href="#">More more longer menu item</a></li>
<li><a href="#">More more more longer menu item</a></li>
<li><a href="#">More more more more longer menu item</a></li>
</div>
<div class="col-md-2 image .hidden-xs .hidden-sm">
<img src="http://placehold.it/150x220">
</div>
</ul>
</div>
添加類.hidden-xs和.hidden-sm未在小設備中顯示
CSS：
.image {
position:relative;
right:0px;
padding:0 5px;
margin:0;
}
.image img {float:right;}
您是否嘗試過靶向父元素.dropdown菜單：後， 嘗試亞當的CSS後加入這樣的事情：
.dropdown-menu:after < li:nth-child(1){ background: url(1st) center }
.dropdown-menu:after < li:nth-child(2){ background: url(2nd) center }
.dropdown-menu:after < li:nth-child(3){ background: url(3rd) center }
//etc
我還沒有嘗試過了，但我認爲這是一個很好的解決方案。
這裏有一個防彈例如：
HTML標記：
<div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu imaged_menu" role="menu" aria-labelledby="dLabel">
<div class="col-lg-6 col-xs-6 fulllist">
<li><a href="#">Longer menu item</a>
</li>
<li><a href="#">More longer menu item</a>
</li>
<li><a href="#">More more longer menu item</a>
</li>
<li><a href="#">More more more longer menu item</a>
</li>
<li><a href="#">More more more more longer menu item</a>
</li>
<li><a href="#">Longer menu item</a>
</li>
<li><a href="#">More longer menu item</a>
</li>
<li><a href="#">More more longer menu item</a>
</li>
<li><a href="#">More more more longer menu item</a>
</li>
<li><a href="#">More more more more longer menu item</a>
</li>
<li><a href="#">Longer menu item</a>
</li>
<li><a href="#">More longer menu item</a>
</li>
<li><a href="#">More more longer menu item</a>
</li>
<li><a href="#">More more more longer menu item</a>
</li>
<li><a href="#">More more more more longer menu item</a>
</li>
</div>
<div class="col-lg-6 col-xs-6 imagebox">
<img src="http://blog.templatemonster.com/wp-content/uploads/2012/10/Bootstraps.jpg" alt="" />
</div>
</ul>
</div>
然後CSS標記：
/* CSS used here will be applied after bootstrap.css */
.imaged_menu {
white-space: nowrap;
}
.imagebox {
padding:0 2%;
}
.imagebox img {
max-height:100%;
max-width:100%;
}
/* let's hide image ----------- */
@media only screen and (max-width : 768px) {
.imagebox {
display:none !important
}
}
如您有其他的答案通知，他們都在某個時候失敗，因爲他們試圖使用Bootstrap而沒有其他的東西，因此遭受重創漿紗。通過這種方法，Bootstrap僅用於基本部署，然後我們添加一些次要的HTML標記來準確定位元素，然後使用常規CSS。嘗試調整大小，你會看到它是如何表現的確切地說正如你問，沒有需要重大的變化。是的，圖像會在你想要的時候消失。
這一切都這樣說，這是一些基本的腳手架例如，所以你可能需要調整一些尺寸或媒體查詢提示點，但你會得到的想法
另一個偉大的解決方案！ – Jedda 2014-09-08 11:14:17
看到我的編輯答案！現在它的工作！ – Suresh 2014-09-05 10:16:04