Bootstrap：与图像一样宽的下拉菜单

【问题标题】：Bootstrap: Dropdown as wide as the imageBootstrap：与图像一样宽的下拉菜单
【发布时间】：2018-01-13 23:55:36
【问题描述】：

我想在 Laravel 5.4 下使用“标志图像”制作本地化下拉菜单。我做到了，但下拉菜单比图像宽得多。如果我想成为与图像一样宽的下拉菜单，如何配置它？

我的sn-p：

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
        <img src="/img/flags/{{App::getLocale()}}.png" alt="Logo"></a>
    </a>
    <ul class="dropdown-menu" role="menu">
        <li><a href="{{URL::to('lang/hu')}}"><img src="/img/flags/hu.png"></a></li>
        <li><a href="{{URL::to('lang/en')}}"><img src="/img/flags/en.png"></a></li>
    </ul>
</li>

更新：

【问题讨论】：

截图可能会有所帮助。
@Spectarion 我添加了它

标签： php html css twitter-bootstrap laravel-5

【解决方案1】：

Bootstrap 的 .dropdown-menu 类有一个 min-widthproperty。用min-width: 0 覆盖它，这样它的宽度就和你的标志图标一样了。

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
        <img src="/img/flags/{{App::getLocale()}}.png" alt="Logo"></a>
    </a>
    <ul class="dropdown-menu" role="menu" style="min-width:0">
        <li><a href="{{URL::to('lang/hu')}}"><img src="/img/flags/hu.png"></a></li>
        <li><a href="{{URL::to('lang/en')}}"><img src="/img/flags/en.png"></a></li>
    </ul>
</li>

预览：

注意：如果您不希望标志周围有空格，请编辑 padding 属性。

【讨论】：