Question

在包含我的徽标时，我在使用navbar-brand时遇到了麻烦。首先，我使用最新的bootstrap CSS（getbootstrap.com），问题也可以在那里看到：只要包含徽标，导航栏就有点大了。如果我只使用文字，那就完全没问题了。你可以看到当悬停一个导航栏元素时它有多少，它仍然显示一点点＆＃34;更轻＆＃34;导航元素下的颜色（所以没有悬停区域）。

我试图以任何方式编辑它，也看看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

这是因为该品牌可能是针对文字制作的，而不是徽标。

您的徽标高度为26px，因此剩余的24px填充 - 每个顶部和底部12px（导航栏高50px）。

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

10px是一个很好的顶部填充值，因为徽标文本随后与菜单项对齐。只要顶部+底部填充低于24px，您就可以安全地忽略底部填充，否则就会这样做。

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

Answer 2

我在bootstrap.min.css文件中看不到任何高度。

.navbar-brand {
    height: 50px;
}

Bootstrap 3.0 navbar-brand扩大了导航栏

2 个答案: