Question

这是第一次使用Bootstrap，对HTML / CSS来说相对较新。当我在导航栏中插入徽标时，导航列表中的第一项＆＃34; Home＆＃34;在它之前出现了一个缺口，我无法弄清楚如何摆脱。当我删除徽标时，这个空间消失了，所以它在某种程度上相关。类似的问题延续到下拉菜单中，其中＆＃34; HOME＆＃34;是缩进的，而导航的其余部分则不是。我有什么想法我做错了吗？

这是HTML

<div class = "navbar navbar-default navbar-static-top">
    <div class ="container">

        <button class = "navbar-toggle" data-toggle ="collapse" data-target = ".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href ="#" ><img src="images/PermitMeLogoHorz.png"</a>

        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Wireless Communications <b class="caret"></b></a>
                <ul class="dropdown-menu" role="menu">
                <li><a href="#">Site Acquisition</a></li>
                <li><a href="#">Land Use Consulting</a></li>
                <li><a href="#">Permit Expediting</a></li>
                <li><a href="#">Project Management</a></li>
            </ul>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

      </div>    
</div>

这是CSS

.navbar-brand > img{
width:100%;
margin-top:5px;

}

.navbar-nav li a {
color: #CCC000;
font-size:17px;
font-weight:400;
padding-top:25px;

}

.navbar .nav .active > a, .navbar .nav .active > a:hover {
background-color: #fff;
color:black;
height:60px;
}

.navbar .nav > li > a:hover {
color: #b20000;

}

.dropdown  ul li a{
color:black;

}

.dropdown li a:hover{
background-color:gray ;
color:white;

}

.caret{
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 8px solid #b20000;
margin-top:-2px;

}

向NavBar添加徽标在NavBar和下拉菜单中的第一个项目之前创建差距

0 个答案: