固定ヘッダー内のdiv全体に色を塗りつぶして、テキストを中間に配置する方法

Question

固定ヘッダーに行要素（col-xs-2）を埋め込んでいます。私は1つの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

列は、標準のパディングDEFIを持っていますned。 CSSのdivのスタイルクラスを定義することができます。

.nopadding { 
    padding: 0; 
} 

などのように、あなたのHTMLにそれらを追加：各divのための

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

、これ。

Answer 2

このようにこのような問題を解決しようとしました。 divの高さをminの高さとして追加して解決しました。

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