如何使用Bootstrap使用图像制作图块/网格下拉列表？

Question

我想制作一个类似Microsoft应用选择的菜单，如下面链接中显示的图像：

Microsoft菜单示例：

<div class="container-fluid">

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown">
        <!--aria-label="Left Align"-->
        <span class="glyphicon glyphicon-th"></span>
    </button>

    <ul class="dropdown-menu" aria-labelledby="dropdownmenu">

        <div class="row-fluid">

            <div class="col-sm-4">

                <li>
                    <a href="#" title="1"><img src="1.png"></a>
                </li>

                <li>
                    <a href="#" title="2"><img src="2.png"></a>
                </li>

            </div>

            <div class="col-sm-4">

                <li>
                    <a href="#" title="3"><img src="3.png"></a>
                </li>

                <li>
                    <a href="#" title="4"><img src="4.png"></a>
                </li>

            </div>

        </div>

    </ul>

</div>

＆＃13;

＆＃13;

.container-fluid {
    margin-top: 1%;
}

div.col-sm-4 {
    margin-right: -14%
}

img {
    position: static;
    width: 60%;
    margin: 5%;
    border-radius: 5%;
}

ul.dropdown-menu {
    max-width: 40%;
    max-height: 960%;
}

＆＃13;

＆＃13;

＆＃13;

这是我尝试的但是， 最大的问题是下拉列表的背景比内容（图像）大，我不知道如何使背景适合图像的大小

感谢您的帮助！