Bootstrap对齐 - 导航标题对齐

Question

我正在努力实现这一目标：

然而，因为我有一个图像，左对齐，然后两行NEXT到图像（一个是H1，一个是H2），我正在努力争取品牌＆＃39;导航栏中的框。它似乎有很多填充和奇怪的东西。

这是我的导航条形码：

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

...

这个问题可能在我的班级=＆＃34;标题＆＃34;区域。我创建了一些css来尝试正确定位我的项目：

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

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

但我无法在导航栏区域内正确对齐图像旁边的两个标题。

Bootply版本：http://www.bootply.com/OzTmfYgHX7

问题似乎是我的品牌块（带图像和文字）似乎在顶部有一个大的填充。图像应该正对着屏幕顶部。

Answer 1

如果您自定义bootstrap：

http://getbootstrap.com/customize/

将@ navbar-height更改为75px左右。那应该为你做。

默认情况下，bootstrap将高度限制为50px。任何比这更高的品牌形象都会溢出到下面的内容中。

Answer 2

您会发现使用.navbar品牌类包装徽标图片和徽标文字。

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

因此，您可以根据它创建一个自定义类，并根据需要调整值。像我的导航栏品牌或任何你喜欢的东西。 只需快速播放，将填充设置为5px 15px可能是合适的。

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