导航菜单不起作用

问题描述 投票：0回答：3

如何解决引导导航栏面临的这 3 个问题：

  • 调整大小时菜单无法正确折叠（窗口变小）
  • 将图标放在菜单链接旁边而不是下方
  • 调整窗口大小时，将注册/登录按钮链接到另一个页面

这是一个演示：

https://jsfiddle.net/whywymam/zpdpsuLn/

HTML 代码：

<div class="container">

      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

          <navbar>

              <div class="upperRow">

               <div class="navbar-header">
                    <a href="#" class="brand navbar-brand"> <img src="image/logo.png" class="img-responsive"></a>
               </div>

               <div id="btnTopInline">

                   <ul class="nav navbar-nav navbar-right imgicon hidden-xs">

                       <li>
                         <div class="indivColl">
                            <a href="signupLogin.php">
                               <img src="image/jobseekerlogo.png" class="indi">
                               <p class="indit">Job Seeker</p>
                            </a>
                         </div>
                       </li>

                       <li>
                         <div id="empColl">
                            <a href="signupLoginEmp.php">
                               <img src="image/employerlogo.png" class="emp">
                               <p class="empt">Employer</p>
                            </a>
                         </div>
                       </li>

                   </ul>

               </div>

               <!--                for tablet and mobile view-->
                <button type="button" class="btn btn-login pull-right visible-xs">
                    <a href="signupLoginEmp.php">
                        Employer<br>Log In
                    </a>
                </button>

                <button type="button" class="btn btn-login pull-right visible-xs">
                    <a href="signupLogin.php">
                        Job Seeker<br>Log In
                    </a>
                </button>

              </div>

            <div class="middleRow">

                <div class="navbar-inner navbar-default navbar-static-top navcolor">

                          <div class="navbar-header ">

                              <!--button to appear when display is on mobile device-->
                              <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".nav-collapse">
                                  <span class="sr-only">Toggle navigation</span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                              </button>

                          </div>

                          <div class="nav-collapse collapse-in" id="nav-collapse">

                              <ul class="nav  navbar-nav center-block">
                                <li><a href="home.php">Home<img src="image/home.png" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="about.php">About<img src="image/about.png" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="pyw.php">Prove Job<img src="image/PYW.png" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="#">Job<img src="image/jobs.png" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="rescources.php">Resources<img src="image/resource.png" width="75" height="65" alt="" title="" /></a></li>
                             </ul>

                          </div>


                    </div> <!-- end inner navbar -->

            </div> <!-- end middle row -->

          </navbar>

      </div> <!-- end col-lg-12 col-md-12 col-sm-12 col-xs-12 -->

  </div><!-- end container -->

CSS：

.img-responsive {
max-width: 60%;
margin-bottom: 15%;
padding-top: -3%;
}
.imgicon {
padding-left: 50%;
margin-top: -2%;
}

.middleRow{
padding-top: 10%;
margin-top: 5%;
}

.navcolor{
background-color: transparent;
}

.navbar-default {
margin-top: 3%;
}

.navbar-nav {
float:none;
margin: 0 auto;
display: table;
table-layout: fixed;
text-align: center;
}

#btnTopInline{
display: inline-block;
float: right;
clear: none;
}

@media(min-width:768px) {
  .nav-collapse{
        display: inline;
  }
  }

提前谢谢您:)

html css twitter-bootstrap-3
3个回答
2
投票

这是我在html和css中做了一些修改的代码

要使 toggal 按钮起作用，请使用 

data-target=".nav-collapse"
代替 
data-target=".navbar-collapse"

对于菜单链接旁边的图标，在 ancor 标签内添加 img 标签。

以下是更改

<body>
         <div class="navbar">
            <div class="navbar-inner">
               <div class="container">
                  <div class="navbar-header">
                     <a href="#" class="brand navbar-brand"> <img src="image/logo.png" class="img-responsive"></a>
                  </div>
                  <ul class="nav navbar-nav navbar-right imgicon hidden-xs">
                     <div id="indivColl">
                        <a href="signupLogin.php">
                           <img src="image/jobseekerlogo.png" class="indi">
                           <p class="indit">Job Seeker</p>
                        </a>
                     </div>
                     <div id="empColl">
                        <a href="signupLoginEmp.php">
                           <img src="image/employerlogo.png" class="emp">
                           <p class="empt">Employer</p>
                        </a>
                     </div>
                  </ul>
                  <!--                for tablet and mobile view-->
                  <button type="submit" id="btn-login-header" class="btn btn-login pull-right visible-xs mobile-login" 
                     id="header-mobile-login-button" data-target="#indivColl">
                  Employer<br>Log In
                  </button>
                  <button type="submit" id="btn-login-header" class="btn btn-login pull-right visible-xs mobile-login" 
                     id="header-mobile-login-button" data-target="#empColl">
                  Job Seeker<br>Log In
                  </button>

                  <button type="button" class="navbar-toggle btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                  <span class="icon-bar">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  </button>

                  <div class="nav-collapse collapse in" id="navbar-collapse">
                     <ul class="nav navbar-nav">
                        <li><a href="home.php">Home<img src="image/home.png" width="75" height="65" alt="" title="" /></a></li>
                        <li><a href="about.php">About<img src="image/about.png" width="75" height="65" alt="" title="" /></a></li>
                        <li><a href="pyw.php">Prove Your Worth<img src="image/PYW.png" width="75" height="65" alt="" title="" /></a></li>
                        <li><a href="#">Job<img src="image/jobs.png" width="75" height="65" alt="" title="" /></a></li>
                        <li><a href="rescources.php">Resources<img src="image/resource.png" width="75" height="65" alt="" title="" /></a></li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
   </body>

在CSS中添加这个

@media(min-width:768px) {
      .nav-collapse{
            display: block;
      }
 }
0
投票

首先：对于响应式布局工作，引导程序需要处理行和列。您需要将导航栏放入其中。

<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <navbar>
         </navbar>
    </div>
</div>

第二：我没有测试，但我认为您需要在导航栏的 li 内创建一个包含 text-align: center; 的类的 div或者把这个类放在li中。 div 内放置文本和图标，每个都有一个类，包含 float: left 和clear: Both。

<ul class="nav navbar-nav navbar-right imgicon hidden-xs">
            <div id="indivColl">
            <a href="signupLogin.php"><img src="image/jobseekerlogo.png" class="indi"><p class="indit">Job Seeker</p></a>
            </div>

            <div id="empColl">
            <a href="signupLoginEmp.php"><img src="image/employerlogo.png" class="emp"><p class="empt">Employer</p></a>
            </div>
        </ul>

上面你需要将每个div放在一个li中。在img中插入类并将p标签替换为span标签，然后将相同的类添加到span中。 这个例子是一个假设，我没有测试，但你可以在 www.w3cschools.com 中搜索更多关于 float 和 clear 的信息

代码中导航栏的逻辑完全错误。您在带有两个容器的导航栏中有一个导航栏。你需要回顾一下 bootstrap、html 和 css 的概念！将此与您的进行比较：

    <div class="navbar navbar-default navbar-static-top navcolor">


<div class="navbar-header">
  <a href="#" class="navbar-brand"> <img src="image/logo.png" class="img-responsive"></a>
</div>

<!-- for tablet and mobile view-->
<button type="submit" id="btn-login-header" class="btn btn-login pull-right navbar-btn visible-xs mobile-login" id="header-mobile-login-button" data-target="#indivColl">  Job Seeker Log In </button>
<button type="submit" id="btn-login-header" class="btn btn-login pull-right navbar-btn visible-xs mobile-login" id="header-mobile-login-button" data-target="#empColl"> Employer Log In </button>

<div class="navbar-header">
  <!--button to appear when display is on mobile device-->
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>

<div class="collapse navbar-collapse" id="navbar-collapse">
  <ul class="nav navbar-nav">
    <li><a href="home.php">Home</a><img src="image/home.png" width="75" height="65" alt="" title="" /></li>
    <li><a href="about.php">About</a><img src="image/about.png" width="75" height="65" alt="" title="" /></li>
    <li><a href="pyw.php">Prove Your Worth</a><img src="image/PYW.png" width="75" height="65" alt="" title="" /></li>
    <li><a href="#">Job</a><img src="image/jobs.png" width="75" height="65" alt="" title="" /></li>
    <li><a href="rescources.php">Resources</a><img src="image/resource.png" width="75" height="65" alt="" title="" /></li>
    <li class="imgicon hidden-xs">
      <div id="indivColl">
        <a href="signupLogin.php"><img src="image/jobseekerlogo.png" class="indi"><p class="indit">Job Seeker</p></a>
      </div>
    </li>
    <li class="imgicon hidden-xs">
      <div id="empColl">
        <a href="signupLoginEmp.php"><img src="image/employerlogo.png" class="emp"><p class="empt">Employer</p></a>
      </div>
    </li>
  </ul>
</div>

我没有输入 css 或完全引导规则的详细信息，但我认为这段代码对您有用。并且不要忘记浮动和清晰的课程^^

这将是一种方法。再见，喜欢我的回答（如果送达）！

0
投票
@inject AppState AppState

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container fluid">
        <a class="navbar-brand" href="#">stats_ui</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                Task Level Stats
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <button class="btn btn-link nav-link" @onclick="ToggleEnvironmentDropdown">
                Job Stats
            </button>
            @if (showEnvironments)
            {
                <div>
                    <button class="btn btn-link nav-link" @onclick="() => SelectEnvironment("DEV")">DEV</button>
                    @if (AppState.SelectedEnvironment == "DEV")
                    {
                        <div>
                            <button class="btn btn-link nav-link" @onclick="() => SelectRegion("CEEMEA")">CEEMEA</button>
                            <button class="btn btn-link nav-link" @onclick="() => SelectRegion("ASIA")">ASIA</button>
                            <button class="btn btn-link nav-link" @onclick="() => SelectRegion("LATAM")">LATAM</button>
                        </div>
                    }
                </div>
                <div>
                    <button class="btn btn-link nav-link" @onclick="() => SelectEnvironment("UAT")">UAT</button>
                    @if (AppState.SelectedEnvironment == "UAT")
                    {
                        <div>
                            <!-- Regions buttons for UAT -->
                        </div>
                    }
                </div>
                <div>
                    <button class="btn btn-link nav-link" @onclick="() => SelectEnvironment("BETA")">BETA</button>
                    @if (AppState.SelectedEnvironment == "BETA")
                    {
                        <div>
                            <!-- Regions buttons for BETA -->
                        </div>
                    }
                </div>
            }
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;
    private bool showEnvironments = false;
    
    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
    
    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
    
    private void ToggleEnvironmentDropdown()
    {
        showEnvironments = !showEnvironments;
    }

    private void SelectEnvironment(string environment)
    {
        AppState.SetEnvironment(environment);
        showEnvironments = false; // Optional: Close the dropdown after selection
    }

    private void SelectRegion(string region)
    {
        AppState.SetRegion(region);
        // Trigger any other actions needed when a region is selected
    }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.