Question

我想为我的标题菜单创建一个活动类我尝试删除标题中所有元素的顶部和底部填充，但没有任何效果。

这是我的代码：

<header>
              <nav class="navbar navbar-default">
                    <div class="container-fluid header-custom">
                        <div class="navbar-header">
                          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <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.html"><img alt="Climatherm" src="img/home.png"></a>
                        </div>
                        <p class="navbar-text pull-right hidden-xs hidden-sm">09 99 99 99 99</p>
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                          <ul class="nav navbar-nav">
                            <li class="active"><span><a href="#">Plomberie Sanitaires</a></span></li>
                            <li class="active"><span><a href="#">Chauffage Climatisation</a></span></li>
                            <li class="active"><span><a href="#">nouvelles énergies</a></span></li>
                            <li class="active"><span><a href="#">dépannage maintenance</a></span></li>
                            <li class="active"><span><a href="#">Partenaires</a></span></li>
                            <li class="active"><span><a href="#">nous Contacter</a></span></li>
                          </ul>
                        </div>
                    </div>
                </nav>
      </header>

我的css代码

body{
    font-family: 'Roboto', sans-serif;
    max-width: 1200px;
    margin-left:auto;
    margin-right:auto;
}

.navbar-default {
    background-color: #ed1c24;
    border:none;
    border-radius:0px;
}

.header-custom{
    max-width:1000px;
    padding-top:0px;
    padding-bottom:0px;
}


.navbar-text{
    font-size: 18px;
    font-weight: 700;
    color:#fff!important;
    background-color:#d80109;
    border-radius:18px;
    padding:8px 20px 8px 30px;
    margin-top:8px;
    margin-bottom:auto;
}

.navbar-text::before{
    content: url(../img/contact.png);
    display:inline-block;
    opacity: 1;
    transform:translate(-13px, 4px);
}

.navbar-default .navbar-nav>li>span>a {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.navbar-nav{
    padding: 0;
    text-transform: uppercase;
}

.navbar-nav li {
     display: inline-block;
     list-style: none;
     margin-left: 10px;
}
.navbar-nav li {
     max-width: 110px; 
     line-height: 40px;
     height: 40px;
     background-color: #000;
}
.navbar-nav li span {
     display: -moz-inline-box; /* FF2 or lower */
     display: inline-block; /* FF3, Opera, Safari */
     line-height: normal;
     vertical-align: middle;
     text-align: center;
}
.navbar-nav li span { 
     *display  : inline; /* haslayout for IE6/7 */
}

结果是：

results of my code

我想这样做：

Result expected

我试图在不同的论坛中搜索解决方案，但这里没有任何效果。

Answer 1

这个解决方案可行吗？ fiddle example

我将按钮的高度设置为与容器相同（50px而不是40px）。

.navbar-nav li {
     max-width: 110px; 
     line-height: 50px;
     height: 50px;
     background-color: #000;
}

Bootstrap如何从头部删除填充？

1 个答案: