Question

我正在为我的雇主工作，并在我们的“品牌重塑”阶段遇到了一些问题。有问题的页面可以在这里找到：http://chargehubdevchris.azurewebsites.net/

问题特别针对索引页面，并涉及品牌徽标/文字。文本使用的是Web字体（我们生成的），徽标是在Navbar品牌类锚标记内嵌的图像。

img强制两个元素从所需高度下降约10px，并超过导航所需的高度。

有问题的代码如下：

<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
          <a class="navbar-brand page-scroll" href="#page-top"><img class="homelogo" src="logos/ChargeHub-Logo.png"/><span class="greylogo">Charge</span>Hub</a>
        </div>

我试图在img上使用“pull-left”类，然后将文本与导航的其余部分正确对齐，但使img脱节。我已经将拉力应用于其他元素，尝试调整垂直对齐，甚至是一些负边距。他们并没有真正实现我想要的目标，而且没有让人头疼。

我也尝试将它们放在div中，浮动它，将其设置为显示内联块，但我无法让它很好地播放。

我知道我必须遗漏一些可能相当明显的东西，但我已经尝试了所有我能想到的东西，我在网上找到的所有东西都无济于事，并且希望有人可以帮我解决这个问题。似乎必须有一个简单的方法让bootstrap实现这一点，因为我不能成为第一个尝试的方法！

Answer 1

我确实以这种方式解决了这个问题。

    .navbar-brand img {
        position: absolute;
        top: 0px;
    }

谢谢：）

Answer 2

在<a class="navbar-brand page-scroll" href="#page-top">元素中，更改padding-top属性，使其置于上方。

.navbar-default .navbar-brand {
    padding-top: 0;
}

我看到当你向下滚动时，一些JS代码会将navbar-shrink类添加到栏中。尝试在此类下添加padding-top修改：

.navbar-brand :not(.navbar-shrink) {
    padding-top: 0;
}

基于Bootstrap的布局 - navbar-brand来显示img＆amp;文字内联和对准

2 个答案: