Bootstrap выравнивание - выравнивание заголовка нав

Question

Я пытаюсь добиться этого:

Однако, поскольку у меня есть изображение, выравнивание по левому краю, а затем две линии рядом с изображением (Одним из них является H1 и один - H2), я борюсь за то, чтобы получить «бренд» в моей навигационной панели. Кажется, что у него много отступов и странных вещей.

Это мой нав штрих-код:

<div class="navbar navbar-inverse navbar-custom shadow_bottom navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#small-navbar-button"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <div class="header"> 
        <a class="navbar-brand" href="#"> 
         <img src="~/images/logo.png" alt="AccuFinance - Home Budget Site" /> 
        </a> 

        <a class="navbar-brand" href="#"> 

         <h1>AccuFinance</h1> 
         <h2>Home Finance - Simplifying Budgeting</h2> 
        </a> 
       </div> 


      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="small-navbar-button" style="padding-right: 25px"> 
       <ul class="nav navbar-nav pull-right"> 
        <li class="active"><a href="/"><span class="glyphicon glyphicon-home"></span>&nbsp;Home</a></li> 

...

Этот вопрос, вероятно, вокруг моего класса = "заголовок" области. Я создал несколько CSS, чтобы попытаться расположить свои вещи правильно:

.header img { 
    float: left; 
    margin: 2px; 
    top: 5px; 
    padding: 0; 
} 

.header h1 { 
    position: relative; 
    top: 5px; 
    bottom: 2px; 
    left: 2px; 
} 

Но я не могу показаться, чтобы правильно выровнять два заголовка рядом с изображением, в пределах области NavBar.

Bootply версия: http://www.bootply.com/OzTmfYgHX7

Проблема, кажется, что мой брендинг блок (с изображением и текстом), кажется, имеют большой отступ в верхней части. Изображение должно быть прямо вверху экрана.

Answer 1

При настройке начальной загрузки:

http://getbootstrap.com/customize/

Изменение @ Navbar высоты, чтобы что-то около 75 пикселей. Это должно сделать это для вас.

По умолчанию bootstrap ограничивает высоту до 50 пикселей. Любые изображения бренда, которые выше, будут переполнены в содержание ниже.

Answer 2

Вы найдете, что вы обертываете логотип и логотип с помощью класса .navbar-brand.

.navbar-brand { 
    float: left; 
    height: 50px; 
    padding: 15px 15px; 
    font-size: 18px; 
    line-height: 20px; 
} 

Таким образом, вы можете создать собственный класс, основанный на нем, и использовать соответствующие значения. Что-то вроде my-navbar-brand или всего, что вам нравится. Просто быстрая игра с настройкой прокладки на 5px 15px могла бы быть подходящей.

.my-navbar-brand { 
    float: left; 
    height: 50px; 
    padding: 5px 15px; 
    font-size: 18px; 
    line-height: 20px; 
}