将图像添加到引导下拉菜单

Question

在 Bootstrap3 中将图像添加到默认导航栏下拉菜单的最佳方法是什么？我想在下图中重新创建布局，其中图像填充到下拉菜单中项目的右侧。有什么想法吗？

编辑：我计划在移动设备上隐藏图像以获得更好的可用性，所以我只希望在桌面上使用这种布局。

这是a fiddle 我目前所处的位置

.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;
}

Answer 1

你会这样做：

.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.中

Answer 2

试试这个：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;}

Answer 3

它的工作！查看演示 Fiddle！

Fiddle Demo

---

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;
}

Answer 4

您是否尝试过定位父元素.dropdown-menu:after， 尝试在 Adam 的 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

我没有尝试过，但我认为这是一个很好的解决方案。

Answer 5

这里有一个防弹示例：

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。尝试调整大小，您会看到它的行为完全如您所要求的那样，无需进行重大更改。是的，图像会在您需要时消失。

说了这么多，这是一些脚手架的基本示例，因此您可能需要调整一些尺寸或媒体查询提示点，但您会明白的