Устраните высоту моего входа в мою навигационную панель

Question

Я следил за this post accepted answer, чтобы по вертикали выровнять мои навигационные ссылки с моим логотипом.

Но моя ссылка также зарегистрировались следить за вертикальный размер и срок до полной 50px высоты NavBar:

Как я могу установить нормальную высоту моей Вход кнопки?

Спасибо.

HTML:

<!-- /navbar --> 
<nav class="navbar navbar-static-top bg-faded"> 
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" 
         aria-controls="navbar-header"> 
        &#9776; 
       </button> 
    <!-- Logo --> 
    <a class="navbar-brand" href="/en/"> 
     <img class="img" height="50px" src="/static/images/logo.png"/> 
    </a> 
    <div class="collapse navbar-toggleable-xs" id="navbar-header"> 
     <ul class="nav navbar-nav"> 
      <!-- logged-in nav items --> 
      <!-- <a class="nav-item nav-link " href="/en/product/">Product</a> --> 
      <!-- <a class="nav-item nav-link " href="/en/pricing/">Pricing</a> --> 
      <!-- <a class="nav-item nav-link " href="/en/clients/">Clients</a> --> 
      <a class="nav-item nav-link " href="/en/about/">About Us</a> 
     </ul> 
     <!-- to designers: I am not sure about the 'float: right' style --> 
     <ul class="nav navbar-nav" style="float: right"> 
      <!-- ... --> 
      <a class="nav-item btn btn-primary" href="/en/accounts/login/">Sign In</a> 
     </ul> 
    </div> 
</nav> 

И CSS:

.navbar { 
    background-color: white; 
    border-bottom-color: lightgray; 
    border-bottom-style: solid; 
    border-bottom-width: thin; 
} 

.nav-item { 
line-height: 50px; 
} 

Answer 1

Вы подаете класс nav-item CSS, который устанавливает line-height: 50px на "Вход" кнопку. Просто удалите его так:

<a class="btn btn-primary" href="/en/accounts/login/">Sign In</a> 

Это сделает кнопку высоты нормальной. Но вам все равно придется добавить что-то вроде верхней границы, чтобы вертикально выровнять кнопку с другими ссылками и логотипом.

.navbar-nav .btn { 
    margin-top: 10px; // Adjust the actual number of pixels accordingly 
} 

Однако вы также не являетесь HTML-кодом. Если хакерский код не был преднамеренным, вы должны ссылаться на Bootstrap Docs, чтобы правильно применять свои HTML-структуры и классы CSS.