Question

我是初学者，我正在尝试创建以下导航栏。

----------------------------------------------------------------
|  75   |    inconveniently long brand name in 60 pixel row    |
| pixel |                                                      |
| icon  |             lots  of  menu  items  in  25  pixel  row|
----------------------------------------------------------------

当屏幕太窄时，我可以使用隐藏/显示显示较短的（缩写）品牌名称，并且在必要时我想要第二行菜单项的汉堡包。

关于如何实现这一目标的任何想法？

Answer 1

你可以在这里学习我的例子。：）

<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">

    <div class="container topnav">
        <img class="img-responsive" src="img/origin.png" alt="MACDONALD" style="margin: auto 200px !important;">
        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

                <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 topnav"><img class="img-responsive" id="image-fix" src="img/origin.png" alt=""></a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin: auto 200px !important;">
            <ul class="nav navbar-nav ">
                <li>
                    <a href="#about">Welcome</a>
                </li>
                <li>
                    <a href="#services">Services</a>
                </li>
            </ul>

这里是Demo

此致

2线自举导航栏带图标，

1 个答案: