css - Bootstrap 3.0 navbar-brand 扩大navbar

Question

在包含我的 Logo 时，我在使用 navbar-brand 时遇到了问题。首先，我使用的是最新的 bootstrap CSS (getbootstrap.com)，问题也在那里可见:只要包含 Logo ，导航栏就有点大。如果我只使用文本，那完全没问题。您可以看到当鼠标悬停在导航栏元素上时，它仍然在导航元素下方显示了一点“较浅”的颜色(因此没有悬停区域)。

我尝试过以任何方式编辑它，也尝试过查看 CSS，尽管我不太确定是否要更改它，所以我宁愿在更改任何内容之前先在这里询问。

以下代码是我遇到问题的导航栏部分:

<a class="navbar-brand" href="index.php?p=home">
<img src="images/page/header_trans2.png" />
</a>

包括以下完整的导航栏代码:

<div class="navbar navbar-primary navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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" href="index.php?p=home">
            <img src="images/page/header_trans2.png" />
        </a>
    </div>
    <div class="collapse navbar-collapse">
        <div class="row">
            <div class="col-md-8">
            <ul class="nav navbar-nav">
            <li class="<?php $site = $_GET["p"]; if($site == "update") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=update">Updates</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-target="#" data-toggle="dropdown">About <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="index.php?p=about">AIRTRADE Aircraft Germany</a></li>
                    <li><a href="index.php?p=partners">Distribution Partners</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-target="#" data-toggle="dropdown"><strong><span class="glyphicon glyphicon-th-list"></span> Sales</strong> <b class="caret"></b></a>
                <ul class="dropdown-menu list-group">
                    <li class="<?php $site = $_GET["p"]; if($site == "jetsale") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=jetsale"><b>Jets</b>   <span class="badge text-right" align="right"><?php echo $jets; ?></span></a></li>
                    <li class="<?php $site = $_GET["p"]; if($site == "airsale") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=airsale"><b>Aircrafts</b>  <span class="badge text-right"><?php echo $airs; ?></span></a></li>
                    <li class="<?php $site = $_GET["p"]; if($site == "helisale") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=helisale"><b>Helicopters</b>   <span class="badge text-right"><?php echo $helis; ?></span></a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-target="#" data-toggle="dropdown">AirShop <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li class="<?php $site = $_GET["p"]; if($site == "flightsim") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=flightsim">Flight Simulators</a></li>
                    <li class="<?php $site = $_GET["p"]; if($site == "magictow") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=magictow">Magic Tow</a></li>
                    <li class="<?php $site = $_GET["p"]; if($site == "mlube") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=mlube">MetalLube Anti-Friction</a></li>
                    <li class="<?php $site = $_GET["p"]; if($site == "equipparts") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=equipparts">Equipment parts</a></li>
                    <li class="<?php $site = $_GET["p"]; if($site == "partners2") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=partners2">Partners</a></li>
                    <li class="<?php $site = $_GET["p"]; if($site == "misc") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=misc">Miscellaneous</a></li>
                </ul>
            </li>
            <li class="<?php $site = $_GET["p"]; if($site == "contact") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=contact">Contact</a></li>

            </ul>
            </div>
            <div class="col-md-2">
            <ul class="nav navbar-nav">
                <li>
                <?php if ($login->isUserLoggedIn() == true) : ?>
                    <p class="navbar-text navbar-right text-right">Signed in as <a href="index.php?p=overview" class="navbar-link"><?php echo $_SESSION['user_name'] ?></a></p>
                <?php endif; ?>
                </li>
            </ul>
            </div>
        </div>
    </div><!-- /.nav-collapse -->
</div><!-- /.container -->

感谢您的帮助!

Answer 1

这是因为品牌可能是为文字而不是 Logo 制作的。

您的 Logo 高度为 26 像素，因此您还有 24 像素的填充 - 顶部和底部各 12 像素(导航栏高 50 像素)。

.navbar-brand {
    padding: 10px 15px;
}

10px 是一个很好的顶部填充值，因为 Logo 文本然后与菜单项对齐。只要 top+bottom padding 小于 24px，你就可以安全地忽略 bottom padding，否则做例如

.navbar-brand {
    padding: 20px 15px 4px 15px; /* last left padding value _can_ be left away */
}