Question

我希望你们都没事。我是新来的，我有一个问题。我正在使用mvc，c＃，html，css和boostrap。我正在尝试开发一个响应式导航栏。它包含每个菜单项的图标。例如，home（带有单词的房子图标），第2项，第3项等。当在移动设备（小屏幕）中显示导航栏时，汉堡包菜单中的图标继续显示为与计算机版本中的图标一样大。我想在每个屏幕尺寸的导航栏中调整icnons尺寸（品牌徽标和项目）。您就是代码：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="brand">
                <img class="img-responsive" src="http://Brandlogo.com/brandlogo.png alt="">
            </a>

        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">

                <li>
                    <a href="@Url.Action("action1", "item1")">
                        <img class="img-responsive" src="/images/item1.png" alt="imagen"> item1
                    </a>
                </li>
                <li>
                    <a href="#cont-4">
                        <img class="img-responsive " src="/images/item2.png " alt="imagen">item2
                    </a>
                </li>

            </ul>

        </div><!-- /.navbar-collapse -->

    </div><!-- /.container-fluid -->

</nav>

谢谢你的帮助

Answer 1

您应该查看media queries

它使您可以根据屏幕大小更改某些CSS样式。

Bootstrap完整响应导航栏，每个菜单项都有迷你徽标

1 个答案: