Как вертикально выровнять navbar-бренд с navbar-right в мобильном представлении? - PullRequest
Новая
       21

Как вертикально выровнять navbar-бренд с navbar-right в мобильном представлении?

1 голос
/ 19 апреля 2019

У меня есть это меню начальной загрузки, я использую вот код:

Ссылки: 

<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>

Разметка Navbar: 

<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>

Так что в представлении рабочего стола все нормально и модно:

Desktop Navbar Image

Однако, когда мы изменили размер на мобильный, он делает это:

Mobile Navbar Image

Теперь я не уверен, что приводит к тому, что бренд navbar ('Project') выравнивается ближе к верхней части страницы, чем глификон гамбургера, но как мне решить эту проблему, как при добавлении отступов к бренду чтобы исправить это в мобильном представлении, затем оно искажает его в представлении рабочего стола?

Использую ли я правильные классы для того, чтобы скрыть / отобразить значок мобильного гамбургера, или есть какая-то другая основная проблема с этим?

1 Ответ

1 голос
/ 19 апреля 2019

Проблема с 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>
...