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

Question

希望你们一切都好。我是新来的，我有一个问题。我正在使用 mvc，使用 c#、html、css 和 boostrap。 我正在尝试开发一个响应式导航栏。它包含每个菜单项的图标。例如，home（下面有单词的房子图标）、item 2、item 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 样式。