如何为固定标题中的整个div填充颜色，并将文本放在中间

Question

我有一个固定的标题和一个行元素(col-xs-2)来填充它。我尝试为一个col-xs-2元素填充颜色，并将文本置于中心位置。但它只填充col-xs-2 div。有人能帮我吗?我该怎么做？

​

​

ABOUT、B1、LEVEL1等都是一个列-xs-2元素。

​

​

我需要ABOUT div完全填充，而不是只填充一半，并将文本置于中心。

我的代码：

<div class="navbar navbar-default navbar-fixed-top text-center">
        <div class="container-fluid">
            <div class="row">
                <div ng-class="page=='about'?'active':''"  ng-click="changePage('about')" class="col-xs-2 active">ABOUT</div>
                <div ng-class="page=='b1'?'active':''"  ng-click="changePage('b1')" class="col-xs-2">B1</div>
                <div ng-class="page=='level1'?'active':''"  ng-click="changePage('level1')" class="col-xs-2">LEVEL 1</div>
                <div ng-class="page=='level3'?'active':''" ng-click="changePage('level3')" class="col-xs-2">LEVEL 3</div>
                <div ng-class="page=='level5'?'active':''" ng-click="changePage('level5')" class="col-xs-2">LEVEL 5</div>
                <div ng-class="page=='level16'?'active':''" ng-click="changePage('level16')" class="col-xs-2">LEVEL 16</div>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div ng-if="page == 'about'" ng-include="'./html/about/about.html'"></div>
                <div ng-if="page == 'b1'" ng-include="'./html/about/b1.html'"></div>
                <div ng-if="page == 'level1'" ng-include="'./html/about/level1.html'"></div>
                <div ng-if="page == 'level3'" ng-include="'./html/about/level3.html'"></div>
                <div ng-if="page == 'level5'" ng-include="'./html/about/level5.html'"></div>
                <div ng-if="page == 'level16'" ng-include="'./html/about/level16.html'"></div>
            </div>
        </div>
    </div>

Main.css

/*Header*/
.navbar-fixed-top{
  background: #EBE9DB;
  border-bottom: 1px solid lightgrey;
}

.navbar-fixed-top .active{
  background: #1AA0DE;
  color: white;
}

当前输出：

​

预期输出：

​

Answer 1

这些列具有定义的标准填充。您可以在css中为div定义一个样式类。

.nopadding {
   padding: 0;
}

并将它们添加到HTML中，如下所示：

<div ng-class="page=='about'?'active':''"  ng-click="changePage('about')" class="col-xs-2 active nopadding">ABOUT</div>

这是每个div。

Answer 2

我试着这样解决这个问题。我添加了div height作为最小高度，并解决了它。

<div ng-class="page=='about'?'active':''"  ng-click="changePage('about')" class="col-xs-2 active nopadding">ABOUT</div>

和css

.padding{
  min-height: 50px;
  line-height: 50px;
}