css - 将图像添加到 Bootstrap 下拉列表

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

它的工作!查看演示 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;
}