Bootstrap：下拉与图像一样宽

Question

我想在Laravel 5.4下使用“flag images”进行本地化下拉列表。我实现了它，但下拉比图像宽得多。如果我想要像图像一样宽的下拉列表，如何配置它？

我的片段：

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

更新

Answer 1

Bootstrap的.dropdown-menu类具有min-width属性。用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属性。