ブートストラップの内側に要素を水平方向に分割しますか？ （テキストセンターが動作しない）

Question

テキストセンタークラスのブートストラップが動作しないという問題が発生しました。ここにあります。

私はいくつかのリストや他のタグを含むdivを持っていますが、テキストセンタークラスを適用してスクリーン上に何もしません。これは図形のdivを含むdivにも当てはまります。私のコード：あなたはクラスoptions-barと私のdiv要素を見ることができるように

<div class="col-md-12 options-bar text-center"> 
    <ul class="nav nav-pills"> 
     <li class="normal-li">Ordenar por: </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
      Status <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
      Clientes <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
      Fecha <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
      Productos <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
      Asignación <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     <li class="normal-li">Ver por: </li> 
     <li><input type="radio"><label style="color: rgb(46, 116, 241);">Solicitud</label></li> 
     <li><input type="radio"><label style="color: rgb(46, 116, 241);">Producto</label></li> 
     <li id="clock"><span class="glyphicon glyphicon-time"></span></li> 
     <li> 
      <input type="text" class="form-control" placeholder="Buscar solicitudes"> 
     </li> 
    </ul> 
</div> 

は残りを含むものであるが、クラスのテキスト・センターは何もしません。ここで

はoptions-barのための私のCSSスタイルシートです：

.options-bar { 
    line-height: 50px; 
    width: 100%; 
} 

Answer 1

.nav.nav-pills liの項目をflex-grow: 1;に設定すると、すべてのリスト項目を均等に展開して空白を埋めることができます。例のためのSee this fiddle。下のスニペットも追加しましたが、フルスクリーンでしか表示されません。

.options-bar { 
 
    line-height: 50px; 
 
    width: 100%; 
 
} 
 

 
.nav.nav-pills li { 
 
    flex-grow: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<div class="col-md-12 options-bar text-center"> 
 
    <ul class="nav nav-pills"> 
 
    <li class="normal-li">Ordenar por: </li> 
 
    <li class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
 
         Status <span class="caret"></span> 
 
         </a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li class="divider"></li> 
 
     <li><a href="#">Separated link</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
 
         Clientes <span class="caret"></span> 
 
         </a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li class="divider"></li> 
 
     <li><a href="#">Separated link</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
 
         Fecha <span class="caret"></span> 
 
         </a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li class="divider"></li> 
 
     <li><a href="#">Separated link</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
 
         Productos <span class="caret"></span> 
 
         </a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li class="divider"></li> 
 
     <li><a href="#">Separated link</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
 
         Asignación <span class="caret"></span> 
 
         </a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li class="divider"></li> 
 
     <li><a href="#">Separated link</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="normal-li">Ver por: </li> 
 
    <li> 
 
     <input type="radio"> 
 
     <label style="color: rgb(46, 116, 241);">Solicitud</label> 
 
    </li> 
 
    <li> 
 
     <input type="radio"> 
 
     <label style="color: rgb(46, 116, 241);">Producto</label> 
 
    </li> 
 
    <li id="clock"><span class="glyphicon glyphicon-time"></span></li> 
 
    <li> 
 
     <input type="text" class="form-control" placeholder="Buscar solicitudes"> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

は、あなたのdivにこのCSSクラスを試してみてください。

.vertCenter { 
    display: flex; 
    justify-content: center; 
    align-items: center; 

Answer 3

あなたがのdivのセンタリングのためにこれを使用することができます。中心に置くdivに以下のコードを追加してください。

.centered { 
    margin: 0 auto; 
} 

注：通常、div要素はブロック要素以降に全幅を占めます。中心に置くdivが画面幅よりも小さい幅を持っていることを確認してください。そうしないと、違いは見えないかもしれません。