Question

我有一个Bootstrap导航栏，它会折叠成一个按钮，完全默认。

在我的导航栏中，我有一堆图像，而不是文本链接。当条形图折叠时，我希望这些图片更小。

有没有办法解决这个问题？

当它崩溃时，我可以给它使用另一个菜单吗？

示例代码（默认Bootstrap）：

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#FlagMenu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Select plant</a>
        </div>
        <div class="collapse navbar-collapse" id="FlagMenu">
            <ul class="nav navbar-nav">
                <li>
                    <img src="~/Content/imgs/Flag_Dansk.png" />
                </li>
                <li>
                    <img src="~/Content/imgs/Flag_Tjekkisk.png" />
                </li>
                <li>
                    <img src="~/Content/imgs/Flag_Mexikansk.png" />
                </li>
                <li>
                    <img src="~/Content/imgs/Flag_Ungarsk.png" />
                </li>
                <li>
                    <img src="~/Content/imgs/Flag_China.png" />
                </li>
            </ul>

        </div>
    </div>
</nav>

Answer 1

您可以通过将自己的类添加到html-structure中来覆盖部分媒体查询样式的引导程序，您可以在其中为图像定义样式（宽度，高度等）。

菜单折叠时菜单上的不同样式

1 个答案: