Question

我有一个固定标题，其中包含行元素（col-xs-2）。我试图填充一个col-xs-2元素的颜色并将文本置于中心。但它只填充col-xs-2 div。有人可以帮助我，我该怎么做？

关于，B1，LEVEL1等都是一个col-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高度添加为最小高度并解决了它。

<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;
}

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

2 个答案: