ブートストラップV4アルファ - 一元私はいくつかのドロップダウンを持っている左側のナビゲーションバーを持っているCSS

Question

に触れずNAV-アイテムを揃える方法。私はテキストをドロップダウンのために集中的に整列させたい、あるいはナビバーのドロップダウンをより良く表現したいと思っています。どうやってするか？

私の現在のコードスニペット（CSSを変更することなく、可能な場合） -

<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar"> 

      <ul class="nav nav-pills flex-column"> 
      <li class="nav-item"> 
       <a class="nav-link active" href="https://v4-alpha.getbootstrap.com/examples/dashboard/#">Overview <span class="sr-only">(current)</span></a> 
      </li> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Region</a> 
        <div class="dropdown-menu"> 
         <h6 class="dropdown-header">Dropdown header</h6> 
         <a class="dropdown-item" href="#">Action</a> 
         <a class="dropdown-item" href="#">Another action</a> 
         <a class="dropdown-item" href="#">Something else here</a> 
         <div class="dropdown-divider"></div> 
         <a class="dropdown-item" href="#">Separated link</a> 
        </div> 
       </li> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Category</a> 
        <div class="dropdown-menu"> 
         <h6 class="dropdown-header">Dropdown header</h6> 
         <a class="dropdown-item" href="#">Action</a> 
         <a class="dropdown-item" href="#">Another action</a> 
         <a class="dropdown-item" href="#">Something else here</a> 
         <div class="dropdown-divider"></div> 
         <a class="dropdown-item" href="#">Separated link</a> 
        </div> 
       </li> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Brand</a> 
        <div class="dropdown-menu"> 
         <h6 class="dropdown-header">Dropdown header</h6> 
         <a class="dropdown-item" href="#">Action</a> 
         <a class="dropdown-item" href="#">Another action</a> 
         <a class="dropdown-item" href="#">Something else here</a> 
         <div class="dropdown-divider"></div> 
         <a class="dropdown-item" href="#">Separated link</a> 
        </div> 
       </li> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Packaging</a> 
        <div class="dropdown-menu"> 
         <h6 class="dropdown-header">Dropdown header</h6> 
         <a class="dropdown-item" href="#">Action</a> 
         <a class="dropdown-item" href="#">Another action</a> 
         <a class="dropdown-item" href="#">Something else here</a> 
         <div class="dropdown-divider"></div> 
         <a class="dropdown-item" href="#">Separated link</a> 
        </div> 
       </li> 

      <!--<li class="nav-item">--> 
       <!--<a class="nav-link" href="https://v4-alpha.getbootstrap.com/examples/dashboard/#">Analytics</a>--> 
      <!--</li>--> 
      </ul> 

     </nav> 

Answer 1

私は、あなたが "集中ALIGN" 何を意味するかわかりません。あなたはテキストセンターを使ってテキストを水平に整列させることができます。

<ul class="nav nav-pills flex-column text-center"> 
</ul> 

http://www.codeply.com/go/J8C7RwDIDW