Question

我正在尝试使用图像（导航栏中的缩略图图像）作为引导程序下拉列表。我在[bootstrap image下拉] [1]

中尝试了解决方案

[1]：In bootstrap, How do I make an image a dropdown?但它不起作用。这似乎相当简单，但我不能让它工作。基本上这是用户登录时的缩略图图像，我想要下拉用户设置，注销等。

Answer 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>

希望这会有所帮助：）

Answer 2

解决方案非常简单。你所要做的就是使用一个＆＃39; img＆＃39;按钮标签之间的标签。

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

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

Answer 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>

在引导程序中使用图像作为下拉列表

3 个答案: