Question

我有一个正在使用的引导菜单，这里是代码：

链接：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

样式：

<style>
    .nav-container{
        background-color:#16A170;
        color:black;
    }
    .WhiteFont{
        color:white!important;
    }
    .dropdown-toggle:active, .open .dropdown-toggle {
        background:#16A170 !important; 
        color:white !important;
    }
    .dropdown-toggle, .navbar-right{
        color:white!important;
        border:none!important;
    }
    .nav.navbar-nav.navbar-right li a span{
        color: white!important;
    }
    .nav.navbar-nav.navbar-right li a {
        color: white!important;
    }
    .navbar-right:hover{
        background-color:#16A170!important;
    }
    .nav-font-heavy{
        font-size: 200%;
    }
</style>

导航栏标记：

<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container-fluid nav-container">
    <div class="navbar-header">
      <a class="navbar-brand WhiteFont nav-font-heavy" href="#">Project</a>
      <button type="button" class="navbar-toggle navbar-right" data-toggle="collapse" data-target=".navbar-collapse" ><span class="nav-font-heavy glyphicon glyphicon-menu-hamburger"></span></button>
    </div>
    <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="#" class="WhiteFont">Home</a></li>
      <li class="dropdown" style="display:none;"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu_DDL <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#" class="WhiteFont">Page 1</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="../Account/Login.aspx"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
    </div>
  </div>
</nav>

因此，在桌面视图中，一切都很好而且很花哨：

但是，当我们调整大小以移动时，它会这样做：

现在，我不确定是什么原因导致导航栏品牌（“项目”）比汉堡字形图标更接近页面顶部，但是当我向品牌添加填充时如何解决？要在移动视图中修复它，然后在桌面视图中使其失真？

我是否使用正确的类来隐藏/显示移动汉堡图标，还是存在其他潜在问题？

Answer 1

问题是button，对于较小的屏幕，导航栏的高度会增加。因此，要解决该问题，请删除按钮上的边距。

.nav-container {
  background-color: #16A170;
  color: black;
}

.WhiteFont {
  color: white!important;
}

.dropdown-toggle:active,
.open .dropdown-toggle {
  background: #16A170 !important;
  color: white !important;
}

.dropdown-toggle,
.navbar-right {
  color: white!important;
  border: none!important;
}

.nav.navbar-nav.navbar-right li a span {
  color: white!important;
}

.nav.navbar-nav.navbar-right li a {
  color: white!important;
}

.navbar-right:hover {
  background-color: #16A170!important;
}

.nav-font-heavy {
  font-size: 200%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container-fluid nav-container">
    <div class="navbar-header">
      <a class="navbar-brand WhiteFont nav-font-heavy" href="#">Project</a>

      <!--HERE IS WHERE WE REMOVED THE MARGIN-->
      <button type="button" class="navbar-toggle navbar-right" data-toggle="collapse" data-target=".navbar-collapse" style="margin:0px; margin-right:15px;"><span class="nav-font-heavy glyphicon glyphicon-menu-hamburger"></span></button>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#" class="WhiteFont">Home</a></li>
        <li class="dropdown" style="display:none;"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu_DDL <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#" class="WhiteFont">Page 1</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../Account/Login.aspx"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

如何在移动视图中使navbar品牌与navbar-right垂直对齐？

1 个答案: