在引导程序中使用图像作为下拉菜单答案

【问题标题】：Use image as dropdown in bootstrap在引导程序中使用图像作为下拉菜单
【发布时间】：2016-09-03 02:36:30
【问题描述】：

我正在尝试使用图像（导航栏中的缩略图）作为引导下拉菜单。我在[bootstrap image drop down][1]中尝试了解决方案

[1]: In bootstrap, How do I make an image a dropdown? 但它不起作用。这看起来相当简单，但我无法让它工作。基本上这是用户登录时的缩略图，我想要一个用户设置、注销等的下拉菜单。

【问题讨论】：

这看起来很简单，如果你能向我们展示你的代码版本。

【解决方案1】：

我再次尝试并查看了meetup dot com。单击没有背景的图像时，我得到了下拉菜单，但找不到添加插入符号的方法。

<div class="container">
    <div class="dropdown">
        <img class="btn dropdown-toggle" src="images/thumbnail_image.png" alt="dropdown image" data-toggle="dropdown" class="img-responsive">
        <ul class="dropdown-menu">
            <li><a href="#">Settings</a></li>
            <li><a href="#">Log Out</a></li>
            <li><a href="#">Dropdown menu 3</a></li>
        </ul>
    </div>
</div>

希望这会有所帮助:)

【讨论】：

P.S.刚看到你回复的代码。看起来挺好的。很高兴我能帮上忙。 :)
这可行，但是当我单击图像时，我仍然得到白色边框/背景。我正在为图像使用 img-responsive 和 img-circle。

【解决方案2】：

解决方案非常简单。您所要做的就是在按钮标签之间使用一个“img”标签。

<div class="container">
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
            <img src="images/example_image.png" alt="dropdown image" class="img-responsive">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Settings</a></li>
            <li><a href="#">Log Out</a></li>
            <li><a href="#">Dropdown menu 3</a></li>
        </ul>
    </div>
</div>

如果您仍有问题，请附上您的代码以及您的问题。希望这会有所帮助。

【讨论】：

这会在我的图像周围添加一个按钮轮廓。我只想要我的缩略图，右边有一个插入符号作为下拉菜单，没有按钮。就像在meetup dot com 上所做的那样。

【解决方案3】：

通过执行以下操作，我得到了我想要的方式，但是鼠标悬停时没有手形指针，我必须添加指针样式，当我单击下拉菜单时，我的图像后面会出现白色背景。现在我需要正确设置下拉切换的样式来解决这个问题。感谢您的回复。

                        <li class="side-padded margin_left">
                        <div class="dropdown top_margin15">
                            <a class="dropdown-toggle" data-toggle="dropdown">
                                <?php
                                echo '<img id="profile-img" class="img-circle img-responsive" src="'.base_url().'i/mbr/img/'.$this->auth_user_id.'.jpeg">';
                                ?>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Settings</a></li>
                                <li><a href="#">Log Out</a></li>
                                <li><a href="#">Dropdown menu 3</a></li>
                            </ul>
                        </div>
                    </li>

【讨论】：