Question

我正在使用一个bootstrap导航栏，我希望它成为一个左侧带有navbar-brand的导航栏，当它显示在一个小屏幕上时右下角列表项。现在我有一个非常好的工作导航栏，但是当它被调整到一个非常小的尺寸时，右边没有下拉列表，列表项目就完全消失了。导航品牌存在问题我想在下拉显示的同时更改其样式。我考虑过使用@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;

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

Answer 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上进行过测试

使bootstrap导航栏成为小屏幕上的下拉列表

1 个答案: