使引导导航栏成为小屏幕上的下拉菜单答案

【问题标题】：Make bootstrap navbar become a dropdown on small screen使引导导航栏成为小屏幕上的下拉菜单
【发布时间】：2017-02-11 17:33:47
【问题描述】：

我正在使用引导导航栏，我希望它成为左侧带有导航栏品牌的导航栏，当它显示在小屏幕上时，右侧带有下拉列表项。现在我有一个很好的工作导航栏，但是当它被调整到一个非常小的尺寸时，右侧没有下拉菜单，列表项就完全消失了。导航栏品牌存在问题我想在显示下拉列表的同时更改其样式。我考虑过使用@media，但有没有更简单的解决方案？

这是html：

  <nav class="navbar navbar-transparent" role="navigation">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <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>
                        <span class="navbar-brand">All kinds of pizza</span>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="btn">All</li>
                            <li class="btn">Meat taste</li>
                            <li class="btn">Pineapple taste</li>
                            <li class="btn">Mushroom taste</li>
                            <li class="btn">Seafood taste</li>
                            <li class="btn">Vegetarian</li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>

这是更少的：

.navbar-nav
{
  width: 100%;
  text-align: center;

  > li
  {
    float: none;
    display: inline-block;
  }
}

.navbar-header
{
  float: left;
  padding: 15px;
  text-align: center;
  width: 100%;

  .navbar-brand
  {
    font:@mainFont;
    font-size: 40px;
    color: white;
    text-shadow: @shadowToGoOverText;
  }
}
.navbar-brand {float:none;}

.navbar-inner
{
  background:transparent;
}

.navbar-nav
{
  li
  {
    color: white;
    font: @mainFont;
    border: @mainBorder;
    border-color: transparent;
    text-shadow: @shadowToGoOverText;
  }

  li:hover
  {
    color: @mainColor;
    border-color: @borderColor;
    border-radius: @generalRoundness;
    background-color: white;
    text-shadow: none;
  }

及其常量：

//borders

@mainBorder: 4px dashed #407a15;
@generalRoundness: 15px 0px 0px 15px;
@borderColor: #407a15;

//text
@mainFont: bold 25px Tahoma;
@shadowToGoOverText: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;

如果我的代码让您感到困惑，请随时从头开始编写导航栏，然后我会将其中的一部分集成到我自己的中。

【问题讨论】：

第一个问题是：您忘记提及您使用的 Bootstrap 版本。其次，您要求导航栏在v3 和v4 中的行为与默认引导导航完全相同。当您决定使用某个库时，您应该使用该库提供的标记。
@AndreiGheorghiu，好的。我会尝试默认的。感谢您的关注。
随时，雅罗斯拉夫。欢迎来到 SO。
@AndreiGheorghiu 默认导航栏不能满足我的需要
它不会在小屏幕上自行转换为下拉列表。

标签： jquery css twitter-bootstrap navbar dropdown

【解决方案1】：

我使用一个导航栏和两个“ul”元素，一个有display:none，使用javascript检测显示宽度大小，只显示一个“ul”元素，改变显示属性。

    function detectDisplay(){
        var displayWidth = window.screen.width;
        changeMenu(displayWidth);
    }
    
    // show a specific menu according to the display size
    function changeMenu(displayWidt) {
        if (displayWidt < 576) {
            document.getElementById("menu1").style.display = "none";
            document.getElementById("menu2").style.display = "";
        } else if (displayWidt > 575) {
            document.getElementById("menu1").style.display = "";
            document.getElementById("menu2").style.display = "none";
        }
    }

HTML

 <body onresize="detectDisplay();" onload="detectDisplay();">
        <form id="form1" runat="server">
            <div class="container-fluid imgBackground">
                <!-- menu bar -->
                <nav class="navbar navbar-expand-sm bg-dark navbar-dark" style="margin:0 -15px;">
                    <asp:Label ID="Label1" runat="server" Text="UndergroundCR" CssClass="navbar-brand"></asp:Label>
                   <!-- menu 1 -->
                    <ul id="menu1" class="navbar-nav ml-auto" style="display:none;">
                        <li class="nav-item active ">
                            <a class="nav-link" href="index.aspx">Inicio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Nuestros Servicios</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Precios</a>
                        </li>
                    </ul>
                    <!-- menu 2 -->
                    <ul id="menu2" class="navbar-nav ml-auto" style="display:none;">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
                        </li>
                    </ul>
                </nav>
</div>
</div>
</body>

注意：仅在 Firefox v76 上测试过

【讨论】：